atomsystem 0.1.0 → 0.1.2

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 (2) hide show
  1. package/package.json +10 -2
  2. package/tailwind.config.ts +160 -0
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "atomsystem",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "token.json",
7
7
  "tokens",
8
8
  "build",
9
- "app/component"
9
+ "app/component",
10
+ "tailwind.config.ts"
10
11
  ],
11
12
  "scripts": {
12
13
  "dev": "npm run build:token && next dev",
@@ -15,6 +16,13 @@
15
16
  "start": "next start",
16
17
  "lint": "next lint"
17
18
  },
19
+ "peerDependencies": {
20
+ "react": "^18.0.0",
21
+ "react-dom": "^18.0.0",
22
+ "sd-tailwindcss-transformer": "^2.0.0",
23
+ "style-dictionary": "^4.2.0",
24
+ "@tokens-studio/sd-transforms": "^1.2.8"
25
+ },
18
26
  "dependencies": {
19
27
  "@next/third-parties": "^15.0.3",
20
28
  "@tokens-studio/sd-transforms": "^1.2.8",
package/tailwind.config.ts ADDED
@@ -0,0 +1,160 @@
1
+ import type { Config } from "tailwindcss";
2
+
3
+ export default {
4
+ content: [
5
+ "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
7
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
8
+ ],
9
+
10
+ plugins: [],
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ "primary": "var(--brand-primary)",
15
+ "danger": "var(--system-danger)",
16
+ "fill-wrapper": "var(--fill-wrapper)",
17
+ "fill-card": "var(--fill-card)",
18
+ "fill-group": "var(--fill-info)",
19
+ "fill-border": "var(--fill-border)",
20
+ "text-standard": "var(--text-standard)",
21
+ "text-sub": "var(--text-sub)",
22
+ "text-reverse": "var(--text-reverse)",
23
+ "text-sub-reverse": "var(--text-sub-reverse)",
24
+ "input-background-standard": "var(--input-background-standard)",
25
+ "input-background-disabled": "var(--input-background-disabled)",
26
+ "input-background-value": "var(--input-background-value)",
27
+ "input-background-success": "var(--input-background-success)",
28
+ "input-background-error": "var(--input-background-error)",
29
+ "input-border-standard": "var(--input-border-standard)",
30
+ "input-border-focus": "var(--input-border-focus)",
31
+ "input-border-success": "var(--input-border-success)",
32
+ "input-border-error": "var(--input-border-error)",
33
+ "input-text-value": "var(--input-text-value)",
34
+ "input-text-placeholder": "var(--input-text-placeholder)",
35
+ "input-text-success": "var(--input-text-success)",
36
+ "input-text-error": "var(--input-text-error)",
37
+ "button-text":"var(--button-text)",
38
+ "button-primary-standard":"var(--button-primary-standard-background)",
39
+ "button-primary-hover":"var(--button-primary-hover-background)",
40
+ "button-primary-disabled":"var(--button-primary-disabled-background)",
41
+ "button-secondary-standard":"var(--button-secondary-standard-background)",
42
+ "button-secondary-hover":"var(--button-secondary-hover-background)",
43
+ "button-secondary-disabled":"var(--button-secondary-disabled-background)",
44
+ "button-success-standard":"var(--button-success-standard-background)",
45
+ "button-success-hover":"var(--button-success-hover-background)",
46
+ "button-success-disabled":"var(--button-success-disabled-background)",
47
+ "button-danger-standard":"var(--button-danger-standard-background)",
48
+ "button-danger-hover":"var(--button-danger-hover-background)",
49
+ "button-danger-disabled":"var(--button-danger-disabled-background)",
50
+ "button-gray-standard":"var(--button-gray-standard-background)",
51
+ "button-gray-hover":"var(--button-gray-hover-background)",
52
+ "button-gray-disabled":"var(--button-gray-disabled-background)",
53
+ },
54
+ fontSize: {
55
+ // Desktop
56
+ h1: [
57
+ "var(--desktop-h1-font-size)",
58
+ {
59
+ lineHeight: "calc(var(--desktop-h1-line-height) * 1px)",
60
+ fontWeight: "var(--desktop-h1-font-weight)",
61
+ },
62
+ ],
63
+ h2: [
64
+ "var(--desktop-h2-font-size)",
65
+ {
66
+ lineHeight: "calc(var(--desktop-h2-line-height) * 1px)",
67
+ fontWeight: "var(--desktop-h2-font-weight)",
68
+ },
69
+ ],
70
+ h3: [
71
+ "var(--desktop-h3-font-size)",
72
+ {
73
+ lineHeight: "calc(var(--desktop-h3-line-height) * 1px)",
74
+ fontWeight: "var(--desktop-h3-font-weight)",
75
+ },
76
+ ],
77
+ h4: [
78
+ "var(--desktop-h4-font-size)",
79
+ {
80
+ lineHeight: "calc(var(--desktop-h4-line-height) * 1px)",
81
+ fontWeight: "var(--desktop-h4-font-weight)",
82
+ },
83
+ ],
84
+ h5: [
85
+ "var(--desktop-h5-font-size)",
86
+ {
87
+ lineHeight: "calc(var(--desktop-h5-line-height) * 1px)",
88
+ fontWeight: "var(--desktop-h5-font-weight)",
89
+ },
90
+ ],
91
+ h6: [
92
+ "var(--desktop-h6-font-size)",
93
+ {
94
+ lineHeight: "calc(var(--desktop-h6-line-height) * 1px)",
95
+ fontWeight: "var(--desktop-h6-font-weight)",
96
+ },
97
+ ],
98
+
99
+ // Mobile
100
+ mobileH1: [
101
+ "var(--mobile-h1-font-size)",
102
+ {
103
+ lineHeight: "calc(var(--mobile-h1-line-height) * 1px)",
104
+ fontWeight: "var(--mobile-h1-font-weight)",
105
+ },
106
+ ],
107
+ mobileH2: [
108
+ "var(--mobile-h2-font-size)",
109
+ {
110
+ lineHeight: "calc(var(--mobile-h2-line-height) * 1px)",
111
+ fontWeight: "var(--mobile-h2-font-weight)",
112
+ },
113
+ ],
114
+ mobileH3: [
115
+ "var(--mobile-h3-font-size)",
116
+ {
117
+ lineHeight: "calc(var(--mobile-h3-line-height) * 1px)",
118
+ fontWeight: "var(--mobile-h3-font-weight)",
119
+ },
120
+ ],
121
+ mobileH4: [
122
+ "var(--mobile-h4-font-size)",
123
+ {
124
+ lineHeight: "calc(var(--mobile-h4-line-height) * 1px)",
125
+ fontWeight: "var(--mobile-h4-font-weight)",
126
+ },
127
+ ],
128
+ mobileH5: [
129
+ "var(--mobile-h5-font-size)",
130
+ {
131
+ lineHeight: "calc(var(--mobile-h5-line-height) * 1px)",
132
+ fontWeight: "var(--mobile-h5-font-weight)",
133
+ },
134
+ ],
135
+ mobileH6: [
136
+ "var(--mobile-h6-font-size)",
137
+ {
138
+ lineHeight: "calc(var(--mobile-h6-line-height) * 1px)",
139
+ fontWeight: "var(--mobile-h6-font-weight)",
140
+ },
141
+ ],
142
+ },
143
+ borderRadius: {
144
+ "common": "var(--rounded-common)",
145
+ "none": "var(--rounded-none)",
146
+ "xs": "var(--rounded-xs)",
147
+ "sm": "var(--rounded-sm)",
148
+ "md": "var(--rounded-md)",
149
+ "lg": "var(--rounded-lg)",
150
+ "full": "var(--rounded-full)",
151
+ "input-rounded": "var(--input-rounded)"
152
+
153
+ },
154
+ fontFamily: {
155
+ "main": ["var(--main-title)"],
156
+ "body": ["var(--desktop-body-base-font-family)"],
157
+ },
158
+ },
159
+ },
160
+ } satisfies Config;