diff --git a/apps/docs/src/assets/Opacity.png b/apps/docs/src/assets/Opacity.png new file mode 100644 index 00000000..f78dc3da Binary files /dev/null and b/apps/docs/src/assets/Opacity.png differ diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css index 544c5316..803a5a18 100644 --- a/apps/docs/src/index.css +++ b/apps/docs/src/index.css @@ -2,7 +2,7 @@ box-sizing: border-box; padding: 0; margin: 0; - font-family: "SUIT", sans-serif; + font-family: 'SUIT', sans-serif; font-style: normal; } @@ -11,37 +11,32 @@ body { } @font-face { - font-family: "SUIT"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2") - format("woff2"); + font-family: 'SUIT'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; } @font-face { - font-family: "SUIT"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") - format("woff2"); + font-family: 'SUIT'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { - font-family: "SUIT"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2") - format("woff2"); + font-family: 'SUIT'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; } @font-face { - font-family: "SUIT"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2") - format("woff2"); + font-family: 'SUIT'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; } @font-face { - font-family: "SUIT"; - src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2") - format("woff2"); + font-family: 'SUIT'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; } @@ -58,7 +53,7 @@ body { flex-direction: column; gap: 16px; color: white; - font-family: "SUIT", sans-serif; + font-family: 'SUIT', sans-serif; h4 { font-size: 28px; @@ -96,10 +91,81 @@ body { .color-chips { display: flex; - a { + span { width: 80px; height: 80px; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-decoration: none; + color: transparent; + transition: color 160ms ease; + } + + span::before { + content: ''; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.15); + opacity: 0; + transition: opacity 160ms ease; + pointer-events: none; + z-index: 1; + } + + span::after { + content: attr(data-title); + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + text-align: center; + white-space: pre-line; + color: white; + opacity: 0; + transition: opacity 160ms ease; + pointer-events: none; + font-size: 12px; + font-weight: 600; + line-height: 1.2; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); + z-index: 2; + } + + span:hover::before { + opacity: 1; + } + span:hover::after { + opacity: 1; + } + span .alpha-bg { + position: absolute; + inset: 0; + background-image: url('/src/assets/Opacity.png'); + background-position: center; + background-repeat: repeat; + background-size: 80px 80px; + border-radius: 6px; + z-index: 0; } + span .alpha-fill { + position: absolute; + inset: 0; + border-radius: 6px; + z-index: 0; + } + } + .alpha-surface { + padding: 6px; + gap: 10px; + border-radius: 8px; + } + .alpha-surface span { + border: 1px solid rgba(255, 255, 255); + border-radius: 6px; } } diff --git a/apps/docs/src/stories/Colors.stories.tsx b/apps/docs/src/stories/Colors.stories.tsx index c0b8c2b3..1198b068 100644 --- a/apps/docs/src/stories/Colors.stories.tsx +++ b/apps/docs/src/stories/Colors.stories.tsx @@ -1,8 +1,8 @@ import { colors } from '@sopt-makers/colors'; export default { - title: 'colors/Colors' -} + title: 'colors/Colors', +}; export const Default = { render: () => { @@ -11,101 +11,142 @@ export const Default = { const alphaScales = [900, 800, 700, 600, 500, 400, 300, 200, 100]; const renderColorChips = (scalesArr: number[], name: string) => - scalesArr.map(item => { + scalesArr.map((item) => { const key = `${name}${item}` as keyof typeof colors; - return + return ; }); - return
-

* 마우스 오버시 이름과 코드가 뜹니다 *

+ const renderAlphaChips = (scalesArr: number[], name: string) => + scalesArr.map((item) => { + const colorKey = `${name}Alpha${item}` as keyof typeof colors; + const displayName = `alpha${item}`; + return ( + + + + + ); + }); -

Main Color

-
-

black

-
-
-
-

white

-
-
+ return ( +
+

* 마우스 오버시 이름과 코드가 뜹니다 *

-

Gray Scale

-
-

grayscale

-
{renderColorChips(grayScales, 'gray')}
-
+

Main Color

+
+

black

+
+ +
+
+
+

white

+
+ +
+
-

Scale Color

-
-

blue

-
{renderColorChips(scales, 'blue')}
-
-
-

red

-
{renderColorChips(scales, 'red')}
-
-
-

green

-
{renderColorChips(scales, 'green')}
-
-
-

yellow

-
{renderColorChips(scales, 'yellow')}
-
+

Gray Scale

+
+

grayscale

+
{renderColorChips(grayScales, 'gray')}
+
-

Sub Color

-
-

orange

-
{renderColorChips(scales, 'orange')}
-
+

Scale Color

+
+

orange

+
{renderColorChips(scales, 'orange')}
+
+
+

blue

+
{renderColorChips(scales, 'blue')}
+
+
+

red

+
{renderColorChips(scales, 'red')}
+
+
+

green

+
{renderColorChips(scales, 'green')}
+
+
+

yellow

+
{renderColorChips(scales, 'yellow')}
+
-

Alpha Color

-
-

red

-
{renderColorChips(alphaScales, 'red')}
-
-
-

orange

-
{renderColorChips(alphaScales, 'orange')}
-
-
-

blue

-
{renderColorChips(alphaScales, 'blue')}
-
-
-

gray

-
{renderColorChips(alphaScales, 'gray')}
-
+

Alpha Color

+
+

gray

+
{renderAlphaChips(alphaScales, 'gray')}
+
+
+

orange

+
{renderAlphaChips(alphaScales, 'orange')}
+
+
+

blue

+
{renderAlphaChips(alphaScales, 'blue')}
+
+
+

red

+
{renderAlphaChips(alphaScales, 'red')}
+
+
+

green

+
{renderAlphaChips(alphaScales, 'green')}
+
+
+

yellow

+
{renderAlphaChips(alphaScales, 'yellow')}
+
-

Semantic Color

-
-

background

-
-
-
-

background-dimmed

-
-
-
-

secondary

-
-
-
-

success

-
-
-
-

error

-
-
-
-

information

-
-
-
-

attention

-
-
-
- } -} \ No newline at end of file +

Semantic Color

+
+

background

+
+ +
+
+
+

background-dimmed

+
+ +
+
+
+

secondary

+
+ +
+
+
+

success

+
+ +
+
+
+

error

+
+ +
+
+
+

information

+
+ +
+
+
+

attention

+
+ +
+
+
+ ); + }, +}; diff --git a/packages/colors/src/colors.ts b/packages/colors/src/colors.ts index 1211e97c..7db33bc6 100644 --- a/packages/colors/src/colors.ts +++ b/packages/colors/src/colors.ts @@ -57,7 +57,7 @@ export const colors = { yellow600: '#EBA01E', yellow700: '#B57B1D', yellow800: '#72531E', - yellow900: '#3D301A', + yellow900: '#534123', orange50: '#FFECE5', orange100: '#FFCEBD', @@ -118,4 +118,24 @@ export const colors = { grayAlpha700: 'rgba(15, 15, 18, 0.7)', grayAlpha800: 'rgba(15, 15, 18, 0.8)', grayAlpha900: 'rgba(15, 15, 18, 0.9)', + + greenAlpha100: 'rgba(22, 191, 129, 0.1)', + greenAlpha200: 'rgba(22, 191, 129, 0.2)', + greenAlpha300: 'rgba(22, 191, 129, 0.3)', + greenAlpha400: 'rgba(22, 191, 129, 0.4)', + greenAlpha500: 'rgba(22, 191, 129, 0.5)', + greenAlpha600: 'rgba(22, 191, 129, 0.6)', + greenAlpha700: 'rgba(22, 191, 129, 0.7)', + greenAlpha800: 'rgba(22, 191, 129, 0.8)', + greenAlpha900: 'rgba(22, 191, 129, 0.9)', + + yellowAlpha100: 'rgba(255, 194, 52, 0.1)', + yellowAlpha200: 'rgba(255, 194, 52, 0.2)', + yellowAlpha300: 'rgba(255, 194, 52, 0.3)', + yellowAlpha400: 'rgba(255, 194, 52, 0.4)', + yellowAlpha500: 'rgba(255, 194, 52, 0.5)', + yellowAlpha600: 'rgba(255, 194, 52, 0.6)', + yellowAlpha700: 'rgba(255, 194, 52, 0.7)', + yellowAlpha800: 'rgba(255, 194, 52, 0.8)', + yellowAlpha900: 'rgba(255, 194, 52, 0.9)', }; diff --git a/packages/fonts/src/fonts.ts b/packages/fonts/src/fonts.ts index cd5b62d1..c9abdfe7 100644 --- a/packages/fonts/src/fonts.ts +++ b/packages/fonts/src/fonts.ts @@ -31,6 +31,7 @@ function fontObj({ fontWeight, fontSize, lineHeight, letterSpacing }: Font) { export const fontsObject = { HEADING_1_48_B: fontObj({ fontWeight: 700, fontSize: 48, lineHeight: 72, letterSpacing: -2 }), + HEADING_8_40_B: fontObj({ fontWeight: 700, fontSize: 40, lineHeight: 72, letterSpacing: -2 }), HEADING_2_32_B: fontObj({ fontWeight: 700, fontSize: 32, lineHeight: 48, letterSpacing: -2 }), HEADING_3_28_B: fontObj({ fontWeight: 700, fontSize: 28, lineHeight: 42, letterSpacing: -2 }), HEADING_4_24_B: fontObj({ fontWeight: 700, fontSize: 24, lineHeight: 36, letterSpacing: -2 }), @@ -53,7 +54,7 @@ export const fontsObject = { BODY_4_13_M: fontObj({ fontWeight: 500, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }), BODY_4_13_R: fontObj({ fontWeight: 400, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }), BODY_4_13_L: fontObj({ fontWeight: 300, fontSize: 13, lineHeight: 20, letterSpacing: -1.5 }), - LABEL_1_18_SB: fontObj({ fontWeight: 600, fontSize: 19, lineHeight: 24, letterSpacing: -2 }), + LABEL_1_18_SB: fontObj({ fontWeight: 600, fontSize: 18, lineHeight: 24, letterSpacing: -2 }), LABEL_2_16_SB: fontObj({ fontWeight: 600, fontSize: 16, lineHeight: 22, letterSpacing: -2 }), LABEL_3_14_SB: fontObj({ fontWeight: 600, fontSize: 14, lineHeight: 18, letterSpacing: -2 }), LABEL_4_12_SB: fontObj({ fontWeight: 600, fontSize: 12, lineHeight: 16, letterSpacing: -2 }), @@ -61,5 +62,5 @@ export const fontsObject = { } satisfies Record; export const fontsString = Object.fromEntries( - Object.entries(fontsObject).map(([key, value]) => [key, fontStr(value)]) + Object.entries(fontsObject).map(([key, value]) => [key, fontStr(value)]), ) as Record;