@youjeong/moment-token 0.0.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.
- package/README.md +81 -0
- package/build-tokens.mjs +99 -0
- package/dist/css/variables.css +71 -0
- package/dist/scss/_variables.scss +68 -0
- package/dist/tailwind/theme.css +71 -0
- package/package.json +43 -0
- package/tokens/color---primitives.json +72 -0
- package/tokens/color---semantic.json +88 -0
- package/tokens/radius.json +22 -0
- package/tokens/spacing.json +42 -0
- package/tokens/typography.json +74 -0
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# Moment Token
|
|
2
|
+
|
|
3
|
+
현대적인 웹 애플리케이션을 위한 디자인 토큰 패키지입니다. CSS 변수, SCSS 변수, Tailwind 테마 토큰, 그리고 디자인 시스템 전반에서 일관된 스타일을 유지할 수 있도록 정리된 원본 JSON 토큰을 함께 제공합니다.
|
|
4
|
+
|
|
5
|
+
## 주요 기능
|
|
6
|
+
|
|
7
|
+
- 색상, 간격, radius, 타이포그래피용 CSS 커스텀 프로퍼티
|
|
8
|
+
- Sass 프로젝트용 SCSS 변수
|
|
9
|
+
- Tailwind v4 테마 지원
|
|
10
|
+
- 커스텀 도구나 문서 파이프라인에서 사용 가능한 원본 JSON 토큰
|
|
11
|
+
- npm 배포를 위해 자동 생성된 결과물 제공
|
|
12
|
+
|
|
13
|
+
## 설치
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @youjeong/moment-token
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 사용 방법
|
|
20
|
+
|
|
21
|
+
### CSS
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import '@youjeong/moment-token/css';
|
|
25
|
+
|
|
26
|
+
.card {
|
|
27
|
+
background: var(--color-surface-default);
|
|
28
|
+
color: var(--color-text-primary);
|
|
29
|
+
padding: var(--spacing-4);
|
|
30
|
+
border-radius: var(--radius-md);
|
|
31
|
+
border: 1px solid var(--color-border-subtle);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### SCSS
|
|
36
|
+
|
|
37
|
+
```scss
|
|
38
|
+
@use '@youjeong/moment-token/scss' as *;
|
|
39
|
+
|
|
40
|
+
.card {
|
|
41
|
+
background: $color-surface-default;
|
|
42
|
+
color: $color-text-primary;
|
|
43
|
+
padding: $spacing-4;
|
|
44
|
+
border-radius: $radius-md;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Tailwind
|
|
49
|
+
|
|
50
|
+
```css
|
|
51
|
+
@import '@youjeong/moment-token/tailwind';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Tailwind v4의 `@theme` 네임스페이스에 테마 변수가 등록되므로, 유틸리티 클래스 안에서 디자인 토큰을 직접 사용할 수 있습니다.
|
|
55
|
+
|
|
56
|
+
## 제공되는 토큰 export
|
|
57
|
+
|
|
58
|
+
이 패키지는 다음 경로를 제공합니다.
|
|
59
|
+
|
|
60
|
+
- `@youjeong/moment-token/css` → CSS 커스텀 프로퍼티
|
|
61
|
+
- `@youjeong/moment-token/scss` → SCSS 변수
|
|
62
|
+
- `@youjeong/moment-token/tailwind` → Tailwind 테마 CSS
|
|
63
|
+
- `@youjeong/moment-token/tokens/*` → 원본 JSON 토큰 파일
|
|
64
|
+
|
|
65
|
+
## 포함된 토큰 그룹
|
|
66
|
+
|
|
67
|
+
- Colors
|
|
68
|
+
- Spacing
|
|
69
|
+
- Radius
|
|
70
|
+
- Typography
|
|
71
|
+
|
|
72
|
+
## 개발
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm install
|
|
76
|
+
npm run build
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 라이선스
|
|
80
|
+
|
|
81
|
+
MIT
|
package/build-tokens.mjs
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import StyleDictionary from 'style-dictionary';
|
|
2
|
+
|
|
3
|
+
// Figma 동기화 산출물의 $type은 'dimension'이 아니라 'number'라서
|
|
4
|
+
// style-dictionary 내장 size/px 변환이 매치되지 않습니다. 그래서 직접 만들어 사용합니다.
|
|
5
|
+
StyleDictionary.registerTransform({
|
|
6
|
+
name: 'moment/name',
|
|
7
|
+
type: 'name',
|
|
8
|
+
transform: (token) => {
|
|
9
|
+
const file = token.filePath ?? '';
|
|
10
|
+
const path = token.path;
|
|
11
|
+
|
|
12
|
+
if (file.includes('color')) return ['color', ...path].join('-');
|
|
13
|
+
|
|
14
|
+
if (file.includes('spacing')) {
|
|
15
|
+
const rest = path[0].replace(/^space-/, '');
|
|
16
|
+
return ['spacing', rest].join('-');
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (file.includes('radius')) return path.join('-');
|
|
20
|
+
|
|
21
|
+
if (file.includes('typography')) {
|
|
22
|
+
const [category, ...rest] = path;
|
|
23
|
+
const namespace =
|
|
24
|
+
{
|
|
25
|
+
'font-size': 'font-size',
|
|
26
|
+
'line-height': 'leading',
|
|
27
|
+
'letter-spacing': 'tracking',
|
|
28
|
+
'font-family': 'font',
|
|
29
|
+
}[category] ?? category;
|
|
30
|
+
return [namespace, ...rest].join('-');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return path.join('-');
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
StyleDictionary.registerTransform({
|
|
38
|
+
name: 'moment/value',
|
|
39
|
+
type: 'value',
|
|
40
|
+
filter: (token) => token.$type === 'number' || token.$type === 'string',
|
|
41
|
+
transform: (token) => {
|
|
42
|
+
if (token.$type === 'string') return `"${token.$value}"`;
|
|
43
|
+
|
|
44
|
+
const file = token.filePath ?? '';
|
|
45
|
+
const value = Math.round(token.$value * 1000) / 1000;
|
|
46
|
+
|
|
47
|
+
if (file.includes('spacing') || file.includes('radius'))
|
|
48
|
+
return `${value}px`;
|
|
49
|
+
|
|
50
|
+
if (file.includes('typography')) {
|
|
51
|
+
const category = token.path[0];
|
|
52
|
+
if (category === 'font-size') return `${value}px`;
|
|
53
|
+
if (category === 'letter-spacing') return `${value}em`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return `${value}`;
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
const sd = new StyleDictionary({
|
|
61
|
+
source: ['tokens/**/*.json'],
|
|
62
|
+
platforms: {
|
|
63
|
+
css: {
|
|
64
|
+
transforms: ['moment/name', 'moment/value'],
|
|
65
|
+
buildPath: 'dist/css/',
|
|
66
|
+
files: [
|
|
67
|
+
{
|
|
68
|
+
destination: 'variables.css',
|
|
69
|
+
format: 'css/variables',
|
|
70
|
+
options: { outputReferences: true },
|
|
71
|
+
},
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
scss: {
|
|
75
|
+
transforms: ['moment/name', 'moment/value'],
|
|
76
|
+
buildPath: 'dist/scss/',
|
|
77
|
+
files: [
|
|
78
|
+
{
|
|
79
|
+
destination: '_variables.scss',
|
|
80
|
+
format: 'scss/variables',
|
|
81
|
+
options: { outputReferences: true },
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
},
|
|
85
|
+
tailwind: {
|
|
86
|
+
transforms: ['moment/name', 'moment/value'],
|
|
87
|
+
buildPath: 'dist/tailwind/',
|
|
88
|
+
files: [
|
|
89
|
+
{
|
|
90
|
+
destination: 'theme.css',
|
|
91
|
+
format: 'css/variables',
|
|
92
|
+
options: { outputReferences: true, selector: '@theme' },
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
await sd.buildAllPlatforms();
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-white: #ffffff;
|
|
7
|
+
--color-charcoal-950: #211a13;
|
|
8
|
+
--color-sand-100: #faf7f2;
|
|
9
|
+
--color-sand-200: #f1e9dc;
|
|
10
|
+
--color-sand-300: #e4d8c4;
|
|
11
|
+
--color-sand-400: #c9b79c;
|
|
12
|
+
--color-sand-500: #a38f72;
|
|
13
|
+
--color-espresso-800: #4a3a2c;
|
|
14
|
+
--color-espresso-900: #2e2318;
|
|
15
|
+
--color-espresso-950: #211a12;
|
|
16
|
+
--color-gray-warm-500: #8b8072;
|
|
17
|
+
--color-gray-warm-700: #665c4f;
|
|
18
|
+
--color-moss-600: #7c8a6d;
|
|
19
|
+
--color-moss-700: #5f6e52;
|
|
20
|
+
--color-clay-500: #b8794f;
|
|
21
|
+
--color-surface-default: #ffffff;
|
|
22
|
+
--color-badge-text: #ffffff;
|
|
23
|
+
--radius-sm: 8px;
|
|
24
|
+
--radius-md: 18px;
|
|
25
|
+
--radius-lg: 24px;
|
|
26
|
+
--radius-xl: 32px;
|
|
27
|
+
--radius-full: 999px;
|
|
28
|
+
--spacing-1: 4px;
|
|
29
|
+
--spacing-2: 8px;
|
|
30
|
+
--spacing-3: 12px;
|
|
31
|
+
--spacing-4: 16px;
|
|
32
|
+
--spacing-5: 24px;
|
|
33
|
+
--spacing-7: 48px;
|
|
34
|
+
--spacing-6: 32px;
|
|
35
|
+
--spacing-8: 64px;
|
|
36
|
+
--spacing-9: 96px;
|
|
37
|
+
--spacing-10: 128px;
|
|
38
|
+
--font-size-display: 48px;
|
|
39
|
+
--font-size-h1: 38px;
|
|
40
|
+
--font-size-h2: 28px;
|
|
41
|
+
--font-size-h3: 20px;
|
|
42
|
+
--font-size-body-lg: 18px;
|
|
43
|
+
--font-size-body: 16px;
|
|
44
|
+
--font-size-body-sm: 15px;
|
|
45
|
+
--font-size-caption: 13px;
|
|
46
|
+
--leading-tight: 1.15;
|
|
47
|
+
--leading-tight-m: 1.35;
|
|
48
|
+
--leading-nomal: 1.6;
|
|
49
|
+
--leter-spacing-tight: -0.01;
|
|
50
|
+
--leter-spacing-normal: 0;
|
|
51
|
+
--leter-spacing-wide: 0.08;
|
|
52
|
+
--font-primary: "monrope";
|
|
53
|
+
--font-display: "Fraunces";
|
|
54
|
+
--color-brand-primary: var(--color-espresso-900);
|
|
55
|
+
--color-brand-accent: var(--color-moss-700);
|
|
56
|
+
--color-brand-accent-secondary: var(--color-clay-500);
|
|
57
|
+
--color-surface-subtle: var(--color-sand-100);
|
|
58
|
+
--color-surface-accent: var(--color-sand-200);
|
|
59
|
+
--color-surface-accent-strong: var(--color-sand-300);
|
|
60
|
+
--color-surface-inverse: var(--color-espresso-800);
|
|
61
|
+
--color-surface-inverse-strong: var(--color-espresso-950);
|
|
62
|
+
--color-text-primary: var(--color-charcoal-950);
|
|
63
|
+
--color-text-secondary: var(--color-gray-warm-700);
|
|
64
|
+
--color-text-muted: var(--color-gray-warm-500);
|
|
65
|
+
--color-text-inverse: var(--color-white);
|
|
66
|
+
--color-text-inverse-secondary: var(--color-sand-300);
|
|
67
|
+
--color-text-accent: var(--color-moss-700);
|
|
68
|
+
--color-border-subtle: var(--color-sand-300);
|
|
69
|
+
--color-badge-best-bg: var(--color-clay-500);
|
|
70
|
+
--color-badge-new-bg: var(--color-moss-600);
|
|
71
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$color-white: #ffffff;
|
|
5
|
+
$color-charcoal-950: #211a13;
|
|
6
|
+
$color-sand-100: #faf7f2;
|
|
7
|
+
$color-sand-200: #f1e9dc;
|
|
8
|
+
$color-sand-300: #e4d8c4;
|
|
9
|
+
$color-sand-400: #c9b79c;
|
|
10
|
+
$color-sand-500: #a38f72;
|
|
11
|
+
$color-espresso-800: #4a3a2c;
|
|
12
|
+
$color-espresso-900: #2e2318;
|
|
13
|
+
$color-espresso-950: #211a12;
|
|
14
|
+
$color-gray-warm-500: #8b8072;
|
|
15
|
+
$color-gray-warm-700: #665c4f;
|
|
16
|
+
$color-moss-600: #7c8a6d;
|
|
17
|
+
$color-moss-700: #5f6e52;
|
|
18
|
+
$color-clay-500: #b8794f;
|
|
19
|
+
$color-surface-default: #ffffff;
|
|
20
|
+
$color-badge-text: #ffffff;
|
|
21
|
+
$radius-sm: 8px;
|
|
22
|
+
$radius-md: 18px;
|
|
23
|
+
$radius-lg: 24px;
|
|
24
|
+
$radius-xl: 32px;
|
|
25
|
+
$radius-full: 999px;
|
|
26
|
+
$spacing-1: 4px;
|
|
27
|
+
$spacing-2: 8px;
|
|
28
|
+
$spacing-3: 12px;
|
|
29
|
+
$spacing-4: 16px;
|
|
30
|
+
$spacing-5: 24px;
|
|
31
|
+
$spacing-7: 48px;
|
|
32
|
+
$spacing-6: 32px;
|
|
33
|
+
$spacing-8: 64px;
|
|
34
|
+
$spacing-9: 96px;
|
|
35
|
+
$spacing-10: 128px;
|
|
36
|
+
$font-size-display: 48px;
|
|
37
|
+
$font-size-h1: 38px;
|
|
38
|
+
$font-size-h2: 28px;
|
|
39
|
+
$font-size-h3: 20px;
|
|
40
|
+
$font-size-body-lg: 18px;
|
|
41
|
+
$font-size-body: 16px;
|
|
42
|
+
$font-size-body-sm: 15px;
|
|
43
|
+
$font-size-caption: 13px;
|
|
44
|
+
$leading-tight: 1.15;
|
|
45
|
+
$leading-tight-m: 1.35;
|
|
46
|
+
$leading-nomal: 1.6;
|
|
47
|
+
$leter-spacing-tight: -0.01;
|
|
48
|
+
$leter-spacing-normal: 0;
|
|
49
|
+
$leter-spacing-wide: 0.08;
|
|
50
|
+
$font-primary: "monrope";
|
|
51
|
+
$font-display: "Fraunces";
|
|
52
|
+
$color-brand-primary: $color-espresso-900;
|
|
53
|
+
$color-brand-accent: $color-moss-700;
|
|
54
|
+
$color-brand-accent-secondary: $color-clay-500;
|
|
55
|
+
$color-surface-subtle: $color-sand-100;
|
|
56
|
+
$color-surface-accent: $color-sand-200;
|
|
57
|
+
$color-surface-accent-strong: $color-sand-300;
|
|
58
|
+
$color-surface-inverse: $color-espresso-800;
|
|
59
|
+
$color-surface-inverse-strong: $color-espresso-950;
|
|
60
|
+
$color-text-primary: $color-charcoal-950;
|
|
61
|
+
$color-text-secondary: $color-gray-warm-700;
|
|
62
|
+
$color-text-muted: $color-gray-warm-500;
|
|
63
|
+
$color-text-inverse: $color-white;
|
|
64
|
+
$color-text-inverse-secondary: $color-sand-300;
|
|
65
|
+
$color-text-accent: $color-moss-700;
|
|
66
|
+
$color-border-subtle: $color-sand-300;
|
|
67
|
+
$color-badge-best-bg: $color-clay-500;
|
|
68
|
+
$color-badge-new-bg: $color-moss-600;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@theme {
|
|
6
|
+
--color-white: #ffffff;
|
|
7
|
+
--color-charcoal-950: #211a13;
|
|
8
|
+
--color-sand-100: #faf7f2;
|
|
9
|
+
--color-sand-200: #f1e9dc;
|
|
10
|
+
--color-sand-300: #e4d8c4;
|
|
11
|
+
--color-sand-400: #c9b79c;
|
|
12
|
+
--color-sand-500: #a38f72;
|
|
13
|
+
--color-espresso-800: #4a3a2c;
|
|
14
|
+
--color-espresso-900: #2e2318;
|
|
15
|
+
--color-espresso-950: #211a12;
|
|
16
|
+
--color-gray-warm-500: #8b8072;
|
|
17
|
+
--color-gray-warm-700: #665c4f;
|
|
18
|
+
--color-moss-600: #7c8a6d;
|
|
19
|
+
--color-moss-700: #5f6e52;
|
|
20
|
+
--color-clay-500: #b8794f;
|
|
21
|
+
--color-surface-default: #ffffff;
|
|
22
|
+
--color-badge-text: #ffffff;
|
|
23
|
+
--radius-sm: 8px;
|
|
24
|
+
--radius-md: 18px;
|
|
25
|
+
--radius-lg: 24px;
|
|
26
|
+
--radius-xl: 32px;
|
|
27
|
+
--radius-full: 999px;
|
|
28
|
+
--spacing-1: 4px;
|
|
29
|
+
--spacing-2: 8px;
|
|
30
|
+
--spacing-3: 12px;
|
|
31
|
+
--spacing-4: 16px;
|
|
32
|
+
--spacing-5: 24px;
|
|
33
|
+
--spacing-7: 48px;
|
|
34
|
+
--spacing-6: 32px;
|
|
35
|
+
--spacing-8: 64px;
|
|
36
|
+
--spacing-9: 96px;
|
|
37
|
+
--spacing-10: 128px;
|
|
38
|
+
--font-size-display: 48px;
|
|
39
|
+
--font-size-h1: 38px;
|
|
40
|
+
--font-size-h2: 28px;
|
|
41
|
+
--font-size-h3: 20px;
|
|
42
|
+
--font-size-body-lg: 18px;
|
|
43
|
+
--font-size-body: 16px;
|
|
44
|
+
--font-size-body-sm: 15px;
|
|
45
|
+
--font-size-caption: 13px;
|
|
46
|
+
--leading-tight: 1.15;
|
|
47
|
+
--leading-tight-m: 1.35;
|
|
48
|
+
--leading-nomal: 1.6;
|
|
49
|
+
--leter-spacing-tight: -0.01;
|
|
50
|
+
--leter-spacing-normal: 0;
|
|
51
|
+
--leter-spacing-wide: 0.08;
|
|
52
|
+
--font-primary: "monrope";
|
|
53
|
+
--font-display: "Fraunces";
|
|
54
|
+
--color-brand-primary: var(--color-espresso-900);
|
|
55
|
+
--color-brand-accent: var(--color-moss-700);
|
|
56
|
+
--color-brand-accent-secondary: var(--color-clay-500);
|
|
57
|
+
--color-surface-subtle: var(--color-sand-100);
|
|
58
|
+
--color-surface-accent: var(--color-sand-200);
|
|
59
|
+
--color-surface-accent-strong: var(--color-sand-300);
|
|
60
|
+
--color-surface-inverse: var(--color-espresso-800);
|
|
61
|
+
--color-surface-inverse-strong: var(--color-espresso-950);
|
|
62
|
+
--color-text-primary: var(--color-charcoal-950);
|
|
63
|
+
--color-text-secondary: var(--color-gray-warm-700);
|
|
64
|
+
--color-text-muted: var(--color-gray-warm-500);
|
|
65
|
+
--color-text-inverse: var(--color-white);
|
|
66
|
+
--color-text-inverse-secondary: var(--color-sand-300);
|
|
67
|
+
--color-text-accent: var(--color-moss-700);
|
|
68
|
+
--color-border-subtle: var(--color-sand-300);
|
|
69
|
+
--color-badge-best-bg: var(--color-clay-500);
|
|
70
|
+
--color-badge-new-bg: var(--color-moss-600);
|
|
71
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@youjeong/moment-token",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "moment_token design tokens (CSS variables, SCSS variables, Tailwind v4 theme)",
|
|
5
|
+
"files": [
|
|
6
|
+
"dist",
|
|
7
|
+
"tokens",
|
|
8
|
+
"build-tokens.mjs"
|
|
9
|
+
],
|
|
10
|
+
"exports": {
|
|
11
|
+
"./css": "./dist/css/variables.css",
|
|
12
|
+
"./scss": "./dist/scss/_variables.scss",
|
|
13
|
+
"./tailwind": "./dist/tailwind/theme.css",
|
|
14
|
+
"./tokens/*": "./tokens/*"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "node build-tokens.mjs",
|
|
18
|
+
"prepublishOnly": "npm run build"
|
|
19
|
+
},
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "git+https://github.com/taenoll/moment-token.git"
|
|
26
|
+
},
|
|
27
|
+
"keywords": [
|
|
28
|
+
"design-tokens",
|
|
29
|
+
"style-dictionary",
|
|
30
|
+
"css-variables",
|
|
31
|
+
"tailwindcss"
|
|
32
|
+
],
|
|
33
|
+
"author": "Youjeong",
|
|
34
|
+
"license": "MIT",
|
|
35
|
+
"type": "commonjs",
|
|
36
|
+
"bugs": {
|
|
37
|
+
"url": "https://github.com/taenoll/moment-token/issues"
|
|
38
|
+
},
|
|
39
|
+
"homepage": "https://github.com/taenoll/moment-token.git",
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"style-dictionary": "5.5.3"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"white": {
|
|
3
|
+
"$value": "#ffffff",
|
|
4
|
+
"$type": "color"
|
|
5
|
+
},
|
|
6
|
+
"charcoal-950": {
|
|
7
|
+
"$value": "#211a13",
|
|
8
|
+
"$type": "color"
|
|
9
|
+
},
|
|
10
|
+
"sand": {
|
|
11
|
+
"100": {
|
|
12
|
+
"$value": "#faf7f2",
|
|
13
|
+
"$type": "color"
|
|
14
|
+
},
|
|
15
|
+
"200": {
|
|
16
|
+
"$value": "#f1e9dc",
|
|
17
|
+
"$type": "color"
|
|
18
|
+
},
|
|
19
|
+
"300": {
|
|
20
|
+
"$value": "#e4d8c4",
|
|
21
|
+
"$type": "color"
|
|
22
|
+
},
|
|
23
|
+
"400": {
|
|
24
|
+
"$value": "#c9b79c",
|
|
25
|
+
"$type": "color"
|
|
26
|
+
},
|
|
27
|
+
"500": {
|
|
28
|
+
"$value": "#a38f72",
|
|
29
|
+
"$type": "color"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"espresso": {
|
|
33
|
+
"800": {
|
|
34
|
+
"$value": "#4a3a2c",
|
|
35
|
+
"$type": "color"
|
|
36
|
+
},
|
|
37
|
+
"900": {
|
|
38
|
+
"$value": "#2e2318",
|
|
39
|
+
"$type": "color"
|
|
40
|
+
},
|
|
41
|
+
"950": {
|
|
42
|
+
"$value": "#211a12",
|
|
43
|
+
"$type": "color"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"gray-warm": {
|
|
47
|
+
"500": {
|
|
48
|
+
"$value": "#8b8072",
|
|
49
|
+
"$type": "color"
|
|
50
|
+
},
|
|
51
|
+
"700": {
|
|
52
|
+
"$value": "#665c4f",
|
|
53
|
+
"$type": "color"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"moss": {
|
|
57
|
+
"600": {
|
|
58
|
+
"$value": "#7c8a6d",
|
|
59
|
+
"$type": "color"
|
|
60
|
+
},
|
|
61
|
+
"700": {
|
|
62
|
+
"$value": "#5f6e52",
|
|
63
|
+
"$type": "color"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"clay": {
|
|
67
|
+
"500": {
|
|
68
|
+
"$value": "#b8794f",
|
|
69
|
+
"$type": "color"
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"brand": {
|
|
3
|
+
"primary": {
|
|
4
|
+
"$value": "{espresso.900}",
|
|
5
|
+
"$type": "color"
|
|
6
|
+
},
|
|
7
|
+
"accent": {
|
|
8
|
+
"$value": "{moss.700}",
|
|
9
|
+
"$type": "color"
|
|
10
|
+
},
|
|
11
|
+
"accent-secondary": {
|
|
12
|
+
"$value": "{clay.500}",
|
|
13
|
+
"$type": "color"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"surface": {
|
|
17
|
+
"default": {
|
|
18
|
+
"$value": "#ffffff",
|
|
19
|
+
"$type": "color"
|
|
20
|
+
},
|
|
21
|
+
"subtle": {
|
|
22
|
+
"$value": "{sand.100}",
|
|
23
|
+
"$type": "color"
|
|
24
|
+
},
|
|
25
|
+
"accent": {
|
|
26
|
+
"$value": "{sand.200}",
|
|
27
|
+
"$type": "color"
|
|
28
|
+
},
|
|
29
|
+
"accent-strong": {
|
|
30
|
+
"$value": "{sand.300}",
|
|
31
|
+
"$type": "color"
|
|
32
|
+
},
|
|
33
|
+
"inverse": {
|
|
34
|
+
"$value": "{espresso.800}",
|
|
35
|
+
"$type": "color"
|
|
36
|
+
},
|
|
37
|
+
"inverse-strong": {
|
|
38
|
+
"$value": "{espresso.950}",
|
|
39
|
+
"$type": "color"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"text": {
|
|
43
|
+
"primary": {
|
|
44
|
+
"$value": "{charcoal-950}",
|
|
45
|
+
"$type": "color"
|
|
46
|
+
},
|
|
47
|
+
"secondary": {
|
|
48
|
+
"$value": "{gray-warm.700}",
|
|
49
|
+
"$type": "color"
|
|
50
|
+
},
|
|
51
|
+
"muted": {
|
|
52
|
+
"$value": "{gray-warm.500}",
|
|
53
|
+
"$type": "color"
|
|
54
|
+
},
|
|
55
|
+
"inverse": {
|
|
56
|
+
"$value": "{white}",
|
|
57
|
+
"$type": "color"
|
|
58
|
+
},
|
|
59
|
+
"inverse-secondary": {
|
|
60
|
+
"$value": "{sand.300}",
|
|
61
|
+
"$type": "color"
|
|
62
|
+
},
|
|
63
|
+
"accent": {
|
|
64
|
+
"$value": "{moss.700}",
|
|
65
|
+
"$type": "color"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"border": {
|
|
69
|
+
"subtle": {
|
|
70
|
+
"$value": "{sand.300}",
|
|
71
|
+
"$type": "color"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"badge": {
|
|
75
|
+
"best-bg": {
|
|
76
|
+
"$value": "{clay.500}",
|
|
77
|
+
"$type": "color"
|
|
78
|
+
},
|
|
79
|
+
"new-bg": {
|
|
80
|
+
"$value": "{moss.600}",
|
|
81
|
+
"$type": "color"
|
|
82
|
+
},
|
|
83
|
+
"text": {
|
|
84
|
+
"$value": "#ffffff",
|
|
85
|
+
"$type": "color"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"radius-sm": {
|
|
3
|
+
"$value": 8,
|
|
4
|
+
"$type": "number"
|
|
5
|
+
},
|
|
6
|
+
"radius-md": {
|
|
7
|
+
"$value": 18,
|
|
8
|
+
"$type": "number"
|
|
9
|
+
},
|
|
10
|
+
"radius-lg": {
|
|
11
|
+
"$value": 24,
|
|
12
|
+
"$type": "number"
|
|
13
|
+
},
|
|
14
|
+
"radius-xl": {
|
|
15
|
+
"$value": 32,
|
|
16
|
+
"$type": "number"
|
|
17
|
+
},
|
|
18
|
+
"radius-full": {
|
|
19
|
+
"$value": 999,
|
|
20
|
+
"$type": "number"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"space-1": {
|
|
3
|
+
"$value": 4,
|
|
4
|
+
"$type": "number"
|
|
5
|
+
},
|
|
6
|
+
"space-2": {
|
|
7
|
+
"$value": 8,
|
|
8
|
+
"$type": "number"
|
|
9
|
+
},
|
|
10
|
+
"space-3": {
|
|
11
|
+
"$value": 12,
|
|
12
|
+
"$type": "number"
|
|
13
|
+
},
|
|
14
|
+
"space-4": {
|
|
15
|
+
"$value": 16,
|
|
16
|
+
"$type": "number"
|
|
17
|
+
},
|
|
18
|
+
"space-5": {
|
|
19
|
+
"$value": 24,
|
|
20
|
+
"$type": "number"
|
|
21
|
+
},
|
|
22
|
+
"space-7": {
|
|
23
|
+
"$value": 48,
|
|
24
|
+
"$type": "number"
|
|
25
|
+
},
|
|
26
|
+
"space-6": {
|
|
27
|
+
"$value": 32,
|
|
28
|
+
"$type": "number"
|
|
29
|
+
},
|
|
30
|
+
"space-8": {
|
|
31
|
+
"$value": 64,
|
|
32
|
+
"$type": "number"
|
|
33
|
+
},
|
|
34
|
+
"space-9": {
|
|
35
|
+
"$value": 96,
|
|
36
|
+
"$type": "number"
|
|
37
|
+
},
|
|
38
|
+
"space-10": {
|
|
39
|
+
"$value": 128,
|
|
40
|
+
"$type": "number"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"font-size": {
|
|
3
|
+
"display": {
|
|
4
|
+
"$value": 48,
|
|
5
|
+
"$type": "number"
|
|
6
|
+
},
|
|
7
|
+
"h1": {
|
|
8
|
+
"$value": 38,
|
|
9
|
+
"$type": "number"
|
|
10
|
+
},
|
|
11
|
+
"h2": {
|
|
12
|
+
"$value": 28,
|
|
13
|
+
"$type": "number"
|
|
14
|
+
},
|
|
15
|
+
"h3": {
|
|
16
|
+
"$value": 20,
|
|
17
|
+
"$type": "number"
|
|
18
|
+
},
|
|
19
|
+
"body-lg": {
|
|
20
|
+
"$value": 18,
|
|
21
|
+
"$type": "number"
|
|
22
|
+
},
|
|
23
|
+
"body": {
|
|
24
|
+
"$value": 16,
|
|
25
|
+
"$type": "number"
|
|
26
|
+
},
|
|
27
|
+
"body-sm": {
|
|
28
|
+
"$value": 15,
|
|
29
|
+
"$type": "number"
|
|
30
|
+
},
|
|
31
|
+
"caption": {
|
|
32
|
+
"$value": 13,
|
|
33
|
+
"$type": "number"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"line-height": {
|
|
37
|
+
"tight": {
|
|
38
|
+
"$value": 1.149999976158142,
|
|
39
|
+
"$type": "number"
|
|
40
|
+
},
|
|
41
|
+
"tight-m": {
|
|
42
|
+
"$value": 1.350000023841858,
|
|
43
|
+
"$type": "number"
|
|
44
|
+
},
|
|
45
|
+
"nomal": {
|
|
46
|
+
"$value": 1.600000023841858,
|
|
47
|
+
"$type": "number"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"leter-spacing": {
|
|
51
|
+
"tight": {
|
|
52
|
+
"$value": -0.009999999776482582,
|
|
53
|
+
"$type": "number"
|
|
54
|
+
},
|
|
55
|
+
"normal": {
|
|
56
|
+
"$value": 0,
|
|
57
|
+
"$type": "number"
|
|
58
|
+
},
|
|
59
|
+
"wide": {
|
|
60
|
+
"$value": 0.07999999821186066,
|
|
61
|
+
"$type": "number"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
"font-family": {
|
|
65
|
+
"primary": {
|
|
66
|
+
"$value": "monrope",
|
|
67
|
+
"$type": "string"
|
|
68
|
+
},
|
|
69
|
+
"display": {
|
|
70
|
+
"$value": "Fraunces",
|
|
71
|
+
"$type": "string"
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|