@uniai-fe/uds-foundation 0.0.10 → 0.1.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.
Files changed (4) hide show
  1. package/dist/index.css +24 -38
  2. package/package.json +1 -1
  3. package/src/index.scss +4 -17
  4. package/src/typography/fonts/font-family.scss +22 -25
package/dist/index.css CHANGED
@@ -301,7 +301,22 @@
301
301
  z-index: 0;
302
302
  }
303
303
  }
304
- @layer foundation.color {
304
+ @layer foundation.tokens {
305
+ @font-face {
306
+ font-family: "Pretendard JP Variable";
307
+ src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
308
+ font-weight: 100 900;
309
+ font-style: normal;
310
+ font-display: swap;
311
+ }
312
+ @font-face {
313
+ font-family: "InterVariable";
314
+ src: url("./fonts/inter/InterVariable.woff2") format("woff2");
315
+ font-weight: 100 900;
316
+ font-style: normal;
317
+ font-display: swap;
318
+ }
319
+ /* foundation 토큰을 단일 :root 블록으로 모아 중복 선언을 방지한다. */
305
320
  :root {
306
321
  --color-common-100: #fff;
307
322
  --color-common-0: #000;
@@ -532,10 +547,6 @@
532
547
  --color-success: var(--color-green-40);
533
548
  --color-information: var(--color-blue-60);
534
549
  --color-new: var(--color-red-50);
535
- }
536
- }
537
- @layer foundation.spacing {
538
- :root {
539
550
  --spacing-padding-1: 2px;
540
551
  --spacing-padding-2: 4px;
541
552
  --spacing-padding-3: 6px;
@@ -562,10 +573,6 @@
562
573
  --spacing-gap-13: 48px;
563
574
  --spacing-gap-14: 64px;
564
575
  --spacing-gap-15: 80px;
565
- }
566
- }
567
- @layer foundation.layout {
568
- :root {
569
576
  --theme-breakpoint-xsmall-start: 0px;
570
577
  --theme-breakpoint-small-start: 768px;
571
578
  --theme-breakpoint-medium-start: 992px;
@@ -610,46 +617,25 @@
610
617
  --theme-radius-large-1: 12px;
611
618
  --theme-radius-large-2: 16px;
612
619
  --theme-radius-xlarge: 16px;
613
- }
614
- }
615
- @layer foundation.typography {
616
- @font-face {
617
- font-family: "Pretendard JP Variable";
618
- src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
619
- font-weight: 100 900;
620
- font-style: normal;
621
- font-display: swap;
622
- }
623
- @font-face {
624
- font-family: "InterVariable";
625
- src: url("./fonts/inter/InterVariable.woff2") format("woff2");
626
- font-weight: 100 900;
627
- font-style: normal;
628
- font-display: swap;
629
- }
630
- :root :root {
631
620
  --font-family-pretendard:
632
621
  "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
633
622
  "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
634
623
  "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
635
624
  "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
636
- "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
637
- "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
625
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum", "Oxygen",
626
+ "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
638
627
  --font-family-inter:
639
628
  "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
640
- "Pretendard Variable", "Pretendard", "-apple-system",
641
- "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica",
642
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic",
643
- "맑은 고딕", "돋움", "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu",
644
- "Cantarell", "sans-serif";
629
+ "Pretendard Variable", "Pretendard", "-apple-system", "BlinkMacSystemFont",
630
+ "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", "Apple Color Emoji",
631
+ "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
632
+ "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
645
633
  --font-family-system:
646
634
  "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
647
635
  "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
648
- "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
649
- "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
636
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum", "Oxygen",
637
+ "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
650
638
  --font-family-sans: var(--font-family-pretendard);
651
- }
652
- :root {
653
639
  --font-display-large-size: 60px;
654
640
  --font-display-large-line-height: 1.4em;
655
641
  --font-display-large-letter-spacing: -0.2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniai-fe/uds-foundation",
3
- "version": "0.0.10",
3
+ "version": "0.1.1",
4
4
  "description": "UNIAI Design System; Design Foundation Package",
5
5
  "type": "module",
6
6
  "private": false,
package/src/index.scss CHANGED
@@ -20,30 +20,17 @@
20
20
  @include initDocument.foundation-document();
21
21
  }
22
22
 
23
- @layer foundation.color {
24
- :root {
25
- @include colorTokens.foundation-color-tokens();
26
- }
27
- }
23
+ @layer foundation.tokens {
24
+ @include typoFontFace.foundation-typography-font-face();
28
25
 
29
- @layer foundation.spacing {
26
+ /* foundation 토큰을 단일 :root 블록으로 모아 중복 선언을 방지한다. */
30
27
  :root {
28
+ @include colorTokens.foundation-color-tokens();
31
29
  @include spacingPadding.foundation-spacing-padding();
32
30
  @include spacingGap.foundation-spacing-gap();
33
- }
34
- }
35
-
36
- @layer foundation.layout {
37
- :root {
38
31
  @include layoutBreakpoint.foundation-layout-breakpoint();
39
32
  @include layoutSize.foundation-layout-size();
40
33
  @include layoutRadius.foundation-layout-radius();
41
- }
42
- }
43
-
44
- @layer foundation.typography {
45
- @include typoFontFace.foundation-typography-font-face();
46
- :root {
47
34
  @include typoFontFamily.foundation-typography-font-family();
48
35
  @include typoDisplay.foundation-typography-display();
49
36
  @include typoHeading.foundation-typography-heading();
package/src/typography/fonts/font-family.scss CHANGED
@@ -1,30 +1,27 @@
1
1
  @mixin foundation-typography-font-family() {
2
- :root {
3
- // Pretendard와 Inter를 공통 기본 스택으로 사용한다.
4
- --font-family-pretendard:
5
- "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
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
- "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
10
- "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
2
+ // Pretendard와 Inter를 공통 기본 스택으로 사용한다.
3
+ --font-family-pretendard:
4
+ "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
5
+ "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
6
+ "BlinkMacSystemFont", "Apple SD Gothic Neo", "Segoe UI", "Roboto",
7
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
8
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum", "Oxygen",
9
+ "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
11
10
 
12
- // Inter 계열 기본 스택에 Pretendard를 보조 fallback으로 포함한다.
13
- --font-family-inter:
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";
11
+ // Inter 계열 기본 스택에 Pretendard를 보조 fallback으로 포함한다.
12
+ --font-family-inter:
13
+ "InterVariable", "Inter", "Pretendard JP Variable", "Pretendard JP",
14
+ "Pretendard Variable", "Pretendard", "-apple-system", "BlinkMacSystemFont",
15
+ "Segoe UI", "Roboto", "Helvetica Neue", "Helvetica", "Apple Color Emoji",
16
+ "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
17
+ "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
20
18
 
21
- // 시스템 기본 산세리프 스택
22
- --font-family-system:
23
- "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
24
- "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
25
- "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
26
- "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
19
+ // 시스템 기본 산세리프 스택
20
+ --font-family-system:
21
+ "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
22
+ "Helvetica Neue", "Helvetica", "Apple Color Emoji", "Segoe UI Emoji",
23
+ "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum", "Oxygen",
24
+ "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
27
25
 
28
- --font-family-sans: var(--font-family-pretendard);
29
- }
26
+ --font-family-sans: var(--font-family-pretendard);
30
27
  }