@uniai-fe/uds-foundation 0.0.7 → 0.0.8
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.
- package/dist/index.css +6 -75
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -0
- package/dist/provider/ThemeProvider.d.ts +13 -0
- package/dist/provider/ThemeProvider.js +14 -0
- package/dist/provider/index.d.ts +3 -0
- package/dist/provider/index.js +4 -0
- package/package.json +12 -2
- package/src/color/index.scss +7 -2
- package/src/color/primitives.scss +205 -207
- package/src/color/semantic/background.scss +5 -12
- package/src/color/semantic/border.scss +7 -14
- package/src/color/semantic/core.scss +13 -20
- package/src/color/semantic/feedback.scss +7 -14
- package/src/color/semantic/index.scss +17 -7
- package/src/color/semantic/interaction.scss +3 -10
- package/src/color/semantic/label.scss +7 -14
- package/src/color/semantic/surface.scss +8 -15
- package/src/index.scss +53 -16
- package/src/index.ts +1 -0
- package/src/init/document.scss +2 -2
- package/src/init/reset.scss +2 -2
- package/src/layout/breakpoint.scss +5 -7
- package/src/layout/radius.scss +28 -30
- package/src/layout/size.scss +16 -18
- package/src/provider/ThemeProvider.tsx +23 -0
- package/src/provider/index.ts +2 -0
- package/src/spacing/gap.scss +16 -18
- package/src/spacing/padding.scss +12 -14
- package/src/typography/fonts/font-face.scss +1 -1
- package/src/typography/fonts/font-family.scss +1 -1
- package/src/typography/styles/body.scss +22 -24
- package/src/typography/styles/caption.scss +9 -11
- package/src/typography/styles/display.scss +13 -15
- package/src/typography/styles/heading.scss +25 -27
- package/src/typography/styles/label.scss +13 -15
package/src/index.scss
CHANGED
|
@@ -1,17 +1,54 @@
|
|
|
1
|
-
@use "./init/reset.scss";
|
|
2
|
-
@use "./init/document.scss";
|
|
1
|
+
@use "./init/reset.scss" as initReset;
|
|
2
|
+
@use "./init/document.scss" as initDocument;
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
@use "./
|
|
6
|
-
@use "./spacing/
|
|
7
|
-
@use "./
|
|
8
|
-
@use "./layout/
|
|
9
|
-
@use "./layout/
|
|
10
|
-
@use "./
|
|
11
|
-
@use "./typography/fonts/font-
|
|
12
|
-
@use "./typography/
|
|
13
|
-
@use "./typography/styles/
|
|
14
|
-
@use "./typography/styles/
|
|
15
|
-
@use "./typography/styles/
|
|
16
|
-
@use "./typography/styles/
|
|
17
|
-
|
|
4
|
+
@use "./color/index.scss" as colorTokens;
|
|
5
|
+
@use "./spacing/padding.scss" as spacingPadding;
|
|
6
|
+
@use "./spacing/gap.scss" as spacingGap;
|
|
7
|
+
@use "./layout/breakpoint.scss" as layoutBreakpoint;
|
|
8
|
+
@use "./layout/size.scss" as layoutSize;
|
|
9
|
+
@use "./layout/radius.scss" as layoutRadius;
|
|
10
|
+
@use "./typography/fonts/font-face.scss" as typoFontFace;
|
|
11
|
+
@use "./typography/fonts/font-family.scss" as typoFontFamily;
|
|
12
|
+
@use "./typography/styles/display.scss" as typoDisplay;
|
|
13
|
+
@use "./typography/styles/heading.scss" as typoHeading;
|
|
14
|
+
@use "./typography/styles/body.scss" as typoBody;
|
|
15
|
+
@use "./typography/styles/label.scss" as typoLabel;
|
|
16
|
+
@use "./typography/styles/caption.scss" as typoCaption;
|
|
17
|
+
|
|
18
|
+
@layer foundation.reset {
|
|
19
|
+
@include initReset.foundation-reset();
|
|
20
|
+
@include initDocument.foundation-document();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@layer foundation.color {
|
|
24
|
+
:root {
|
|
25
|
+
@include colorTokens.foundation-color-tokens();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@layer foundation.spacing {
|
|
30
|
+
:root {
|
|
31
|
+
@include spacingPadding.foundation-spacing-padding();
|
|
32
|
+
@include spacingGap.foundation-spacing-gap();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@layer foundation.layout {
|
|
37
|
+
:root {
|
|
38
|
+
@include layoutBreakpoint.foundation-layout-breakpoint();
|
|
39
|
+
@include layoutSize.foundation-layout-size();
|
|
40
|
+
@include layoutRadius.foundation-layout-radius();
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@layer foundation.typography {
|
|
45
|
+
@include typoFontFace.foundation-typography-font-face();
|
|
46
|
+
:root {
|
|
47
|
+
@include typoFontFamily.foundation-typography-font-family();
|
|
48
|
+
@include typoDisplay.foundation-typography-display();
|
|
49
|
+
@include typoHeading.foundation-typography-heading();
|
|
50
|
+
@include typoBody.foundation-typography-body();
|
|
51
|
+
@include typoLabel.foundation-typography-label();
|
|
52
|
+
@include typoCaption.foundation-typography-caption();
|
|
53
|
+
}
|
|
54
|
+
}
|
package/src/index.ts
CHANGED
package/src/init/document.scss
CHANGED
package/src/init/reset.scss
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--theme-breakpoint-large-start: 1200px;
|
|
7
|
-
}
|
|
1
|
+
@mixin foundation-layout-breakpoint() {
|
|
2
|
+
--theme-breakpoint-xsmall-start: 0px;
|
|
3
|
+
--theme-breakpoint-small-start: 768px;
|
|
4
|
+
--theme-breakpoint-medium-start: 992px;
|
|
5
|
+
--theme-breakpoint-large-start: 1200px;
|
|
8
6
|
}
|
package/src/layout/radius.scss
CHANGED
|
@@ -1,32 +1,30 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--theme-radius-120x120: 16px;
|
|
1
|
+
@mixin foundation-layout-radius() {
|
|
2
|
+
// radius (by size)
|
|
3
|
+
--theme-radius-4x4: 1px;
|
|
4
|
+
--theme-radius-8x8: 2px;
|
|
5
|
+
--theme-radius-12x12: 2px;
|
|
6
|
+
--theme-radius-16x16: 2px;
|
|
7
|
+
--theme-radius-20x20: 4px;
|
|
8
|
+
--theme-radius-24x24: 4px;
|
|
9
|
+
--theme-radius-32x32: 4px;
|
|
10
|
+
--theme-radius-40x40: 6px;
|
|
11
|
+
--theme-radius-48x48: 6px;
|
|
12
|
+
--theme-radius-56x56: 8px;
|
|
13
|
+
--theme-radius-64x64: 10px;
|
|
14
|
+
--theme-radius-72x72: 12px;
|
|
15
|
+
--theme-radius-80x80: 16px;
|
|
16
|
+
--theme-radius-96x96: 16px;
|
|
17
|
+
--theme-radius-120x120: 16px;
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
19
|
+
// radius (by level)
|
|
20
|
+
--theme-radius-xxsmall: 1px;
|
|
21
|
+
--theme-radius-xsmall: 2px;
|
|
22
|
+
--theme-radius-small: 4px;
|
|
23
|
+
--theme-radius-medium-1: 6px;
|
|
24
|
+
--theme-radius-medium-2: 6px;
|
|
25
|
+
--theme-radius-medium-3: 8px;
|
|
26
|
+
--theme-radius-medium-4: 10px;
|
|
27
|
+
--theme-radius-large-1: 12px;
|
|
28
|
+
--theme-radius-large-2: 16px;
|
|
29
|
+
--theme-radius-xlarge: 16px;
|
|
32
30
|
}
|
package/src/layout/size.scss
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--theme-size-xlarge-2: 120px;
|
|
18
|
-
}
|
|
1
|
+
@mixin foundation-layout-size() {
|
|
2
|
+
--theme-size-xxsmall: 4px;
|
|
3
|
+
--theme-size-xsmall-1: 8px;
|
|
4
|
+
--theme-size-xsmall-2: 12px;
|
|
5
|
+
--theme-size-xsmall-3: 16px;
|
|
6
|
+
--theme-size-small-1: 20px;
|
|
7
|
+
--theme-size-small-2: 24px;
|
|
8
|
+
--theme-size-small-3: 32px;
|
|
9
|
+
--theme-size-medium-1: 40px;
|
|
10
|
+
--theme-size-medium-2: 48px;
|
|
11
|
+
--theme-size-medium-3: 56px;
|
|
12
|
+
--theme-size-medium-4: 64px;
|
|
13
|
+
--theme-size-large-1: 72px;
|
|
14
|
+
--theme-size-large-2: 80px;
|
|
15
|
+
--theme-size-xlarge-1: 96px;
|
|
16
|
+
--theme-size-xlarge-2: 120px;
|
|
19
17
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { PropsWithChildren } from "react";
|
|
2
|
+
|
|
3
|
+
export type FoundationThemeProviderProps = {
|
|
4
|
+
className?: string;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Foundation Theme Provider — `.uds-theme-root` 클래스를 부여해
|
|
9
|
+
* CSS 변수 토큰이 적용될 루트를 명시한다.
|
|
10
|
+
*/
|
|
11
|
+
function ThemeProvider({
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
}: PropsWithChildren<FoundationThemeProviderProps>) {
|
|
15
|
+
const classNames = ["uds-theme-root"];
|
|
16
|
+
if (className) {
|
|
17
|
+
classNames.push(className);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return <div className={classNames.join(" ")}>{children}</div>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export { ThemeProvider };
|
package/src/spacing/gap.scss
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
--spacing-gap-15: 80px;
|
|
18
|
-
}
|
|
1
|
+
@mixin foundation-spacing-gap() {
|
|
2
|
+
--spacing-gap-1: 2px;
|
|
3
|
+
--spacing-gap-2: 4px;
|
|
4
|
+
--spacing-gap-3: 6px;
|
|
5
|
+
--spacing-gap-4: 8px;
|
|
6
|
+
--spacing-gap-5: 12px;
|
|
7
|
+
--spacing-gap-6: 16px;
|
|
8
|
+
--spacing-gap-7: 20px;
|
|
9
|
+
--spacing-gap-8: 24px;
|
|
10
|
+
--spacing-gap-9: 28px;
|
|
11
|
+
--spacing-gap-10: 32px;
|
|
12
|
+
--spacing-gap-11: 36px;
|
|
13
|
+
--spacing-gap-12: 40px;
|
|
14
|
+
--spacing-gap-13: 48px;
|
|
15
|
+
--spacing-gap-14: 64px;
|
|
16
|
+
--spacing-gap-15: 80px;
|
|
19
17
|
}
|
package/src/spacing/padding.scss
CHANGED
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--spacing-padding-11: 40px;
|
|
14
|
-
}
|
|
1
|
+
@mixin foundation-spacing-padding() {
|
|
2
|
+
--spacing-padding-1: 2px;
|
|
3
|
+
--spacing-padding-2: 4px;
|
|
4
|
+
--spacing-padding-3: 6px;
|
|
5
|
+
--spacing-padding-4: 8px;
|
|
6
|
+
--spacing-padding-5: 12px;
|
|
7
|
+
--spacing-padding-6: 16px;
|
|
8
|
+
--spacing-padding-7: 20px;
|
|
9
|
+
--spacing-padding-8: 24px;
|
|
10
|
+
--spacing-padding-9: 28px;
|
|
11
|
+
--spacing-padding-10: 32px;
|
|
12
|
+
--spacing-padding-11: 40px;
|
|
15
13
|
}
|
|
@@ -1,29 +1,27 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
--font-body-large-weight: 600;
|
|
1
|
+
@mixin foundation-typography-body() {
|
|
2
|
+
// Body typography scale is synced with Figma Light variables and includes xxsmall.
|
|
3
|
+
--font-body-large-size: 19px;
|
|
4
|
+
--font-body-large-line-height: 1.5em;
|
|
5
|
+
--font-body-large-letter-spacing: 0px;
|
|
6
|
+
--font-body-large-weight: 600;
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
--font-body-medium-size: 17px;
|
|
9
|
+
--font-body-medium-line-height: 1.5em;
|
|
10
|
+
--font-body-medium-letter-spacing: 0px;
|
|
11
|
+
--font-body-medium-weight: 500;
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
--font-body-small-size: 16px;
|
|
14
|
+
--font-body-small-line-height: 1.5em;
|
|
15
|
+
--font-body-small-letter-spacing: 0px;
|
|
16
|
+
--font-body-small-weight: 400;
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
--font-body-xsmall-size: 15px;
|
|
19
|
+
--font-body-xsmall-line-height: 1.5em;
|
|
20
|
+
--font-body-xsmall-letter-spacing: 0px;
|
|
21
|
+
--font-body-xsmall-weight: 400;
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
23
|
+
--font-body-xxsmall-size: 13px;
|
|
24
|
+
--font-body-xxsmall-line-height: 1.5em;
|
|
25
|
+
--font-body-xxsmall-letter-spacing: 0px;
|
|
26
|
+
--font-body-xxsmall-weight: 400;
|
|
29
27
|
}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--font-caption-large-weight: 600;
|
|
1
|
+
@mixin foundation-typography-caption() {
|
|
2
|
+
--font-caption-large-size: 12px;
|
|
3
|
+
--font-caption-large-line-height: 1.5em;
|
|
4
|
+
--font-caption-large-letter-spacing: 0px;
|
|
5
|
+
--font-caption-large-weight: 600;
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
7
|
+
--font-caption-medium-size: 11px;
|
|
8
|
+
--font-caption-medium-line-height: 1.5em;
|
|
9
|
+
--font-caption-medium-letter-spacing: 0px;
|
|
10
|
+
--font-caption-medium-weight: 500;
|
|
13
11
|
}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--font-display-large-weight: 700;
|
|
1
|
+
@mixin foundation-typography-display() {
|
|
2
|
+
--font-display-large-size: 60px;
|
|
3
|
+
--font-display-large-line-height: 1.4em;
|
|
4
|
+
--font-display-large-letter-spacing: -0.2px;
|
|
5
|
+
--font-display-large-weight: 700;
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
--font-display-medium-size: 44px;
|
|
8
|
+
--font-display-medium-line-height: 1.4em;
|
|
9
|
+
--font-display-medium-letter-spacing: -0.2px;
|
|
10
|
+
--font-display-medium-weight: 700;
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
12
|
+
--font-display-small-size: 36px;
|
|
13
|
+
--font-display-small-line-height: 1.4em;
|
|
14
|
+
--font-display-small-letter-spacing: -0.2px;
|
|
15
|
+
--font-display-small-weight: 600;
|
|
18
16
|
}
|
|
@@ -1,33 +1,31 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--font-heading-xlarge-weight: 600;
|
|
1
|
+
@mixin foundation-typography-heading() {
|
|
2
|
+
--font-heading-xlarge-size: 40px;
|
|
3
|
+
--font-heading-xlarge-line-height: 1.4em;
|
|
4
|
+
--font-heading-xlarge-letter-spacing: -0.2px;
|
|
5
|
+
--font-heading-xlarge-weight: 600;
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
--font-heading-large-size: 32px;
|
|
8
|
+
--font-heading-large-line-height: 1.4em;
|
|
9
|
+
--font-heading-large-letter-spacing: -0.2px;
|
|
10
|
+
--font-heading-large-weight: 600;
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
--font-heading-medium-size: 24px;
|
|
13
|
+
--font-heading-medium-line-height: 1.4em;
|
|
14
|
+
--font-heading-medium-letter-spacing: 0px;
|
|
15
|
+
--font-heading-medium-weight: 600;
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
--font-heading-small-size: 19px;
|
|
18
|
+
--font-heading-small-line-height: 1.4em;
|
|
19
|
+
--font-heading-small-letter-spacing: 0px;
|
|
20
|
+
--font-heading-small-weight: 600;
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
--font-heading-xsmall-size: 17px;
|
|
23
|
+
--font-heading-xsmall-line-height: 1.5em;
|
|
24
|
+
--font-heading-xsmall-letter-spacing: 0px;
|
|
25
|
+
--font-heading-xsmall-weight: 600;
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}
|
|
27
|
+
--font-heading-xxsmall-size: 15px;
|
|
28
|
+
--font-heading-xxsmall-line-height: 1.5em;
|
|
29
|
+
--font-heading-xxsmall-letter-spacing: 0px;
|
|
30
|
+
--font-heading-xxsmall-weight: 600;
|
|
33
31
|
}
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
@
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--font-label-large-weight: 400;
|
|
1
|
+
@mixin foundation-typography-label() {
|
|
2
|
+
--font-label-large-size: 16px;
|
|
3
|
+
--font-label-large-line-height: 1.5em;
|
|
4
|
+
--font-label-large-letter-spacing: 0px;
|
|
5
|
+
--font-label-large-weight: 400;
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
--font-label-medium-size: 14px;
|
|
8
|
+
--font-label-medium-line-height: 1.5em;
|
|
9
|
+
--font-label-medium-letter-spacing: 0px;
|
|
10
|
+
--font-label-medium-weight: 400;
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
12
|
+
--font-label-small-size: 13px;
|
|
13
|
+
--font-label-small-line-height: 1.5em;
|
|
14
|
+
--font-label-small-letter-spacing: 0px;
|
|
15
|
+
--font-label-small-weight: 500;
|
|
18
16
|
}
|