@uniai-fe/uds-foundation 0.0.5 → 0.0.7

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.
Files changed (11) hide show
  1. package/dist/data/typography.js +8 -1
  2. package/dist/index.css +34 -11
  3. package/dist/typography/fonts/pretendard.js +1 -0
  4. package/package.json +3 -3
  5. package/src/data/typography.ts +8 -1
  6. package/src/index.scss +1 -0
  7. package/src/init/reset.scss +9 -0
  8. package/src/typography/fonts/font-face.scss +17 -0
  9. package/src/typography/fonts/font-family.scss +13 -11
  10. package/src/typography/fonts/pretendard.ts +1 -0
  11. package/src/typography/styles/body.scss +8 -2
package/dist/data/typography.js CHANGED
@@ -57,6 +57,7 @@ const typography_tokens = {
57
57
  font_weight: 600
58
58
  }
59
59
  },
60
+ // Body scale follows the latest Figma Light tokens including xxsmall.
60
61
  body: {
61
62
  large: {
62
63
  size: 19,
@@ -71,12 +72,18 @@ const typography_tokens = {
71
72
  font_weight: 500
72
73
  },
73
74
  small: {
74
- size: 15,
75
+ size: 16,
75
76
  line_height: "1.5em",
76
77
  letter_spacing: 0,
77
78
  font_weight: 400
78
79
  },
79
80
  xsmall: {
81
+ size: 15,
82
+ line_height: "1.5em",
83
+ letter_spacing: 0,
84
+ font_weight: 400
85
+ },
86
+ xxsmall: {
80
87
  size: 13,
81
88
  line_height: "1.5em",
82
89
  letter_spacing: 0,
package/dist/index.css CHANGED
@@ -20,6 +20,7 @@
20
20
  letter-spacing: -0.05em;
21
21
  flex-shrink: 0;
22
22
  overscroll-behavior-y: none;
23
+ font-family: var(--font-family-sans, "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", "Pretendard", "Inter", sans-serif);
23
24
  }
24
25
  *:focus,
25
26
  *:focus-within,
@@ -657,23 +658,41 @@
657
658
  --theme-radius-xlarge: 16px;
658
659
  }
659
660
  }
661
+ @layer theme.tokens.typography {
662
+ @font-face {
663
+ font-family: "Pretendard JP Variable";
664
+ src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
665
+ font-weight: 100 900;
666
+ font-style: normal;
667
+ font-display: swap;
668
+ }
669
+ @font-face {
670
+ font-family: "InterVariable";
671
+ src: url("./fonts/inter/InterVariable.woff2") format("woff2");
672
+ font-weight: 100 900;
673
+ font-style: normal;
674
+ font-display: swap;
675
+ }
676
+ }
660
677
  @layer theme.tokens.typography {
661
678
  :root {
662
679
  --font-family-pretendard:
663
680
  "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
664
- "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
665
- "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
666
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
681
+ "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
682
+ "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
683
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
667
684
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
668
685
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
669
686
  --font-family-inter:
670
- "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
671
- "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
672
- "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
673
- "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
687
+ "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
688
+ "Pretendard Variable", "Pretendard", "-apple-system",
689
+ "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
690
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
691
+ "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
692
+ "Cantarell", "sans-serif";
674
693
  --font-family-system:
675
- "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
676
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
694
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
695
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
677
696
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
678
697
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
679
698
  --font-family-sans: var(--font-family-pretendard);
@@ -733,14 +752,18 @@
733
752
  --font-body-medium-line-height: 1.5em;
734
753
  --font-body-medium-letter-spacing: 0px;
735
754
  --font-body-medium-weight: 500;
736
- --font-body-small-size: 15px;
755
+ --font-body-small-size: 16px;
737
756
  --font-body-small-line-height: 1.5em;
738
757
  --font-body-small-letter-spacing: 0px;
739
758
  --font-body-small-weight: 400;
740
- --font-body-xsmall-size: 13px;
759
+ --font-body-xsmall-size: 15px;
741
760
  --font-body-xsmall-line-height: 1.5em;
742
761
  --font-body-xsmall-letter-spacing: 0px;
743
762
  --font-body-xsmall-weight: 400;
763
+ --font-body-xxsmall-size: 13px;
764
+ --font-body-xxsmall-line-height: 1.5em;
765
+ --font-body-xxsmall-letter-spacing: 0px;
766
+ --font-body-xxsmall-weight: 400;
744
767
  }
745
768
  }
746
769
  @layer theme.tokens.typography {
package/dist/typography/fonts/pretendard.js CHANGED
@@ -5,6 +5,7 @@ const pretendardFont = {
5
5
  family: "Pretendard JP Variable",
6
6
  cssVariable: "--theme-font-family-pretendard",
7
7
  fallbacks: [
8
+ "Pretendard JP",
8
9
  "Pretendard Variable",
9
10
  "Pretendard",
10
11
  "Inter",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-foundation",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "UNIAI Design System; Design Foundation Package",
5
5
  "type": "module",
6
6
  "private": false,
@@ -12,7 +12,7 @@
12
12
  "publishConfig": {
13
13
  "access": "public"
14
14
  },
15
- "packageManager": "pnpm@10.26.0",
15
+ "packageManager": "pnpm@10.26.1",
16
16
  "engines": {
17
17
  "node": ">=24",
18
18
  "pnpm": ">=10"
@@ -97,7 +97,7 @@
97
97
  "postcss": "^8.5.6",
98
98
  "postcss-cli": "^11.0.1",
99
99
  "prettier": "^3.7.4",
100
- "sass": "^1.97.0",
100
+ "sass": "^1.97.1",
101
101
  "tsup": "^8.5.1",
102
102
  "typescript": "~5.9.3"
103
103
  }
package/src/data/typography.ts CHANGED
@@ -59,6 +59,7 @@ export const typography_tokens: ThemeTokens["typography"] = {
59
59
  font_weight: 600,
60
60
  },
61
61
  },
62
+ // Body scale follows the latest Figma Light tokens including xxsmall.
62
63
  body: {
63
64
  large: {
64
65
  size: 19,
@@ -73,12 +74,18 @@ export const typography_tokens: ThemeTokens["typography"] = {
73
74
  font_weight: 500,
74
75
  },
75
76
  small: {
76
- size: 15,
77
+ size: 16,
77
78
  line_height: "1.5em",
78
79
  letter_spacing: 0,
79
80
  font_weight: 400,
80
81
  },
81
82
  xsmall: {
83
+ size: 15,
84
+ line_height: "1.5em",
85
+ letter_spacing: 0,
86
+ font_weight: 400,
87
+ },
88
+ xxsmall: {
82
89
  size: 13,
83
90
  line_height: "1.5em",
84
91
  letter_spacing: 0,
package/src/index.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  @use "./layout/breakpoint.scss";
9
9
  @use "./layout/size.scss";
10
10
  @use "./layout/radius.scss";
11
+ @use "./typography/fonts/font-face.scss";
11
12
  @use "./typography/fonts/font-family.scss";
12
13
  @use "./typography/styles/display.scss";
13
14
  @use "./typography/styles/heading.scss";
package/src/init/reset.scss CHANGED
@@ -20,6 +20,15 @@
20
20
  letter-spacing: -0.05em;
21
21
  flex-shrink: 0;
22
22
  overscroll-behavior-y: none;
23
+ font-family: var(
24
+ --font-family-sans,
25
+ "Pretendard JP Variable",
26
+ "Pretendard JP",
27
+ "Pretendard Variable",
28
+ "Pretendard",
29
+ "Inter",
30
+ sans-serif
31
+ ); // Pretendard/Inter 스택을 전역 기본값으로 유지한다.
23
32
  }
24
33
 
25
34
  *:focus,
package/src/typography/fonts/font-face.scss ADDED
@@ -0,0 +1,17 @@
1
+ @layer theme.tokens.typography {
2
+ @font-face {
3
+ font-family: "Pretendard JP Variable";
4
+ src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
5
+ font-weight: 100 900;
6
+ font-style: normal;
7
+ font-display: swap;
8
+ }
9
+
10
+ @font-face {
11
+ font-family: "InterVariable";
12
+ src: url("./fonts/inter/InterVariable.woff2") format("woff2");
13
+ font-weight: 100 900;
14
+ font-style: normal;
15
+ font-display: swap;
16
+ }
17
+ }
package/src/typography/fonts/font-family.scss CHANGED
@@ -1,25 +1,27 @@
1
1
  @layer theme.tokens.typography {
2
2
  :root {
3
- // Pretendard 계열 기본 스택
3
+ // Pretendard와 Inter를 공통 기본 스택으로 사용한다.
4
4
  --font-family-pretendard:
5
5
  "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
6
- "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
7
- "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
8
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
6
+ "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
7
+ "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
8
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
9
9
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
10
10
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
11
11
 
12
- // Inter 계열 기본 스택
12
+ // Inter 계열 기본 스택에 Pretendard를 보조 fallback으로 포함한다.
13
13
  --font-family-inter:
14
- "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
15
- "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
16
- "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
17
- "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
14
+ "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
15
+ "Pretendard Variable", "Pretendard", "-apple-system",
16
+ "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
17
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
18
+ "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
19
+ "Cantarell", "sans-serif";
18
20
 
19
21
  // 시스템 기본 산세리프 스택
20
22
  --font-family-system:
21
- "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
22
- "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
23
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
24
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
23
25
  "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
24
26
  "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
25
27
 
package/src/typography/fonts/pretendard.ts CHANGED
@@ -7,6 +7,7 @@ export const pretendardFont: ThemeFontDefinition = {
7
7
  family: "Pretendard JP Variable",
8
8
  cssVariable: "--theme-font-family-pretendard",
9
9
  fallbacks: [
10
+ "Pretendard JP",
10
11
  "Pretendard Variable",
11
12
  "Pretendard",
12
13
  "Inter",
package/src/typography/styles/body.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @layer theme.tokens.typography {
2
2
  :root {
3
+ // Body typography scale is synced with Figma Light variables and includes xxsmall.
3
4
  --font-body-large-size: 19px;
4
5
  --font-body-large-line-height: 1.5em;
5
6
  --font-body-large-letter-spacing: 0px;
@@ -10,14 +11,19 @@
10
11
  --font-body-medium-letter-spacing: 0px;
11
12
  --font-body-medium-weight: 500;
12
13
 
13
- --font-body-small-size: 15px;
14
+ --font-body-small-size: 16px;
14
15
  --font-body-small-line-height: 1.5em;
15
16
  --font-body-small-letter-spacing: 0px;
16
17
  --font-body-small-weight: 400;
17
18
 
18
- --font-body-xsmall-size: 13px;
19
+ --font-body-xsmall-size: 15px;
19
20
  --font-body-xsmall-line-height: 1.5em;
20
21
  --font-body-xsmall-letter-spacing: 0px;
21
22
  --font-body-xsmall-weight: 400;
23
+
24
+ --font-body-xxsmall-size: 13px;
25
+ --font-body-xxsmall-line-height: 1.5em;
26
+ --font-body-xxsmall-letter-spacing: 0px;
27
+ --font-body-xxsmall-weight: 400;
22
28
  }
23
29
  }