@liner-fe/design-token 2.4.17 → 2.4.19

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 (3) hide show
  1. package/lib/tailwind.css +169 -0
  2. package/package.json +6 -5
  3. package/src/style/tailwind.css +169 -0
package/lib/tailwind.css ADDED
@@ -0,0 +1,169 @@
1
+
2
+ @import 'tailwindcss';
3
+
4
+ @theme {
5
+ --font-flare: 'flare', sans-serif;
6
+
7
+ /* search result page breakpoint */
8
+ /* 답변 페이지에서는 별도로 breakpoint를 지정해 사용하고 있습니다. prism breakpoint와 겹치는 부분은 생략했습니다. */
9
+ --breakpoint-search-result-xl: 1440px;
10
+ --breakpoint-search-result-xxl: 1792px;
11
+
12
+
13
+ /* animation */
14
+ --animate-fadeIn: fadeIn 1s;
15
+
16
+ @keyframes fadeIn {
17
+ 0% {
18
+ opacity: 0;
19
+ }
20
+ 100% {
21
+ opacity: 1;
22
+ }
23
+ }
24
+
25
+ --color-neutral-container-lowest: var(--neutral-container-lowest);
26
+ --color-neutral-container-lowest-hover: var(--neutral-container-lowest-hover);
27
+ --color-neutral-container-low: var(--neutral-container-low);
28
+ --color-neutral-container-low-hover: var(--neutral-container-low-hover);
29
+ --color-neutral-container-mid: var(--neutral-container-mid);
30
+ --color-neutral-container-mid-hover: var(--neutral-container-mid-hover);
31
+ --color-neutral-container-high: var(--neutral-container-high);
32
+ --color-neutral-container-high-hover: var(--neutral-container-high-hover);
33
+ --color-neutral-container-highest: var(--neutral-container-highest);
34
+ --color-neutral-container-static-lowest: var(--neutral-container-static-lowest);
35
+ --color-neutral-container-static-lowest-hover: var(--neutral-container-static-lowest-hover);
36
+ --color-neutral-container-variation-lowest: var(--neutral-container-variation-lowest);
37
+ --color-neutral-fill-lowest: var(--neutral-fill-lowest);
38
+ --color-neutral-fill-lowest-hover: var(--neutral-fill-lowest-hover);
39
+ --color-neutral-fill-low: var(--neutral-fill-low);
40
+ --color-neutral-fill-low-hover: var(--neutral-fill-low-hover);
41
+ --color-neutral-fill-mid: var(--neutral-fill-mid);
42
+ --color-neutral-fill-mid-hover: var(--neutral-fill-mid-hover);
43
+ --color-neutral-fill-high: var(--neutral-fill-high);
44
+ --color-neutral-fill-high-hover: var(--neutral-fill-high-hover);
45
+ --color-neutral-fill-highest: var(--neutral-fill-highest);
46
+ --color-neutral-label-primary: var(--neutral-label-primary);
47
+ --color-neutral-label-secondary: var(--neutral-label-secondary);
48
+ --color-neutral-label-tertiary: var(--neutral-label-tertiary);
49
+ --color-neutral-label-quaternary: var(--neutral-label-quaternary);
50
+ --color-neutral-label-static-primary: var(--neutral-label-static-primary);
51
+ --color-neutral-label-static-secondary: var(--neutral-label-static-secondary);
52
+ --color-neutral-border-overlay-strong: var(--neutral-border-overlay-strong);
53
+ --color-neutral-border-overlay-normal: var(--neutral-border-overlay-normal);
54
+ --color-neutral-border-overlay-subtle: var(--neutral-border-overlay-subtle);
55
+ --color-neutral-border-overlay-hint: var(--neutral-border-overlay-hint);
56
+ --color-neutral-border-opaque-strong: var(--neutral-border-opaque-strong);
57
+ --color-neutral-border-opaque-normal: var(--neutral-border-opaque-normal);
58
+ --color-neutral-border-opaque-subtle: var(--neutral-border-opaque-subtle);
59
+ --color-inverse-container-lowest: var(--inverse-container-lowest);
60
+ --color-inverse-container-lowest-hover: var(--inverse-container-lowest-hover);
61
+ --color-inverse-container-low: var(--inverse-container-low);
62
+ --color-inverse-container-low-hover: var(--inverse-container-low-hover);
63
+ --color-inverse-container-mid: var(--inverse-container-mid);
64
+ --color-inverse-container-mid-hover: var(--inverse-container-mid-hover);
65
+ --color-inverse-container-high: var(--inverse-container-high);
66
+ --color-inverse-container-high-hover: var(--inverse-container-high-hover);
67
+ --color-inverse-container-static-high: var(--inverse-container-static-high);
68
+ --color-inverse-container-static-high-hover: var(--inverse-container-static-high-hover);
69
+ --color-inverse-container-highest: var(--inverse-container-highest);
70
+ --color-inverse-fill-mid: var(--inverse-fill-mid);
71
+ --color-inverse-fill-mid-hover: var(--inverse-fill-mid-hover);
72
+ --color-inverse-label-primary: var(--inverse-label-primary);
73
+ --color-inverse-label-secondary: var(--inverse-label-secondary);
74
+ --color-inverse-label-tertiary: var(--inverse-label-tertiary);
75
+ --color-inverse-label-quaternary: var(--inverse-label-quaternary);
76
+ --color-inverse-label-static-primary: var(--inverse-label-static-primary);
77
+ --color-inverse-label-static-secondary: var(--inverse-label-static-secondary);
78
+ --color-inverse-border-overlay-strong: var(--inverse-border-overlay-strong);
79
+ --color-inverse-border-overlay-normal: var(--inverse-border-overlay-normal);
80
+ --color-inverse-border-overlay-subtle: var(--inverse-border-overlay-subtle);
81
+ --color-inverse-border-overlay-hint: var(--inverse-border-overlay-hint);
82
+ --color-inverse-border-opaque-strong: var(--inverse-border-opaque-strong);
83
+ --color-inverse-border-opaque-normal: var(--inverse-border-opaque-normal);
84
+ --color-inverse-border-opaque-subtle: var(--inverse-border-opaque-subtle);
85
+ --color-brand-container-mid: var(--brand-container-mid);
86
+ --color-brand-container-mid-hover: var(--brand-container-mid-hover);
87
+ --color-brand-container-high: var(--brand-container-high);
88
+ --color-brand-fill-mid: var(--brand-fill-mid);
89
+ --color-brand-fill-mid-hover: var(--brand-fill-mid-hover);
90
+ --color-brand-fill-low: var(--brand-fill-low);
91
+ --color-brand-fill-low-hover: var(--brand-fill-low-hover);
92
+ --color-brand-label-primary: var(--brand-label-primary);
93
+ --color-brand-label-secondary: var(--brand-label-secondary);
94
+ --color-brand-label-variation-secondary: var(--brand-label-variation-secondary);
95
+ --color-brand-border-opaque-normal: var(--brand-border-opaque-normal);
96
+ --color-brand-border-opaque-strong: var(--brand-border-opaque-strong);
97
+ --color-brandinverse-label-primary: var(--brandinverse-label-primary);
98
+ --color-brandinverse-label-secondary: var(--brandinverse-label-secondary);
99
+ --color-brandinverse-label-static-primary: var(--brandinverse-label-static-primary);
100
+ --color-accent-label-primary: var(--accent-label-primary);
101
+ --color-accent-label-yellow: var(--accent-label-yellow);
102
+ --color-accent-label-mint: var(--accent-label-mint);
103
+ --color-accent-label-cyan: var(--accent-label-cyan);
104
+ --color-accent-label-purple: var(--accent-label-purple);
105
+ --color-accent-label-pink: var(--accent-label-pink);
106
+ --color-accent-container-primary: var(--accent-container-primary);
107
+ --color-function-container-positive: var(--function-container-positive);
108
+ --color-function-container-negative: var(--function-container-negative);
109
+ --color-function-container-negative-hover: var(--function-container-negative-hover);
110
+ --color-function-container-caution: var(--function-container-caution);
111
+ --color-function-container-highlight: var(--function-container-highlight);
112
+ --color-function-container-selection: var(--function-container-selection);
113
+ --color-function-container-drag: var(--function-container-drag);
114
+ --color-function-label-positive: var(--function-label-positive);
115
+ --color-function-label-negative: var(--function-label-negative);
116
+ --color-function-label-caution: var(--function-label-caution);
117
+ --color-function-label-link: var(--function-label-link);
118
+ --color-cover-dim-page: var(--cover-dim-page);
119
+ --shadow-normal: var(--lp-sys-shadow-normal);
120
+ --shadow-strong: var(--lp-sys-shadow-strong);
121
+ --shadow-heavy: var(--lp-sys-shadow-heavy);
122
+ --radius-xxs: var(--lp-sys-radius-xxs);
123
+ --radius-xs: var(--lp-sys-radius-xs);
124
+ --radius-s: var(--lp-sys-radius-s);
125
+ --radius-m: var(--lp-sys-radius-m);
126
+ --radius-l: var(--lp-sys-radius-l);
127
+ --radius-xl: var(--lp-sys-radius-xl);
128
+ --radius-xxl: var(--lp-sys-radius-xxl);
129
+ --breakpoint-*: initial;
130
+ --breakpoint-s: 600px;
131
+ --breakpoint-m: 1024px;
132
+ --breakpoint-l: 1366px;
133
+ --breakpoint-xl: 1536px;
134
+ --breakpoint-xxl: 1920px;
135
+ --breakpoint-xxxl: 2560px;
136
+ --spacing-component-50: var(--lp-sys-padding-component-50);
137
+ --spacing-component-100: var(--lp-sys-padding-component-100);
138
+ --spacing-component-150: var(--lp-sys-padding-component-150);
139
+ --spacing-component-200: var(--lp-sys-padding-component-200);
140
+ --spacing-component-300: var(--lp-sys-padding-component-300);
141
+ --spacing-component-400: var(--lp-sys-padding-component-400);
142
+ --spacing-component-500: var(--lp-sys-padding-component-500);
143
+ --spacing-component-600: var(--lp-sys-padding-component-600);
144
+ --spacing-component-700: var(--lp-sys-padding-component-700);
145
+ --spacing-component-800: var(--lp-sys-padding-component-800);
146
+ --spacing-component-900: var(--lp-sys-padding-component-900);
147
+ --spacing-section-50: var(--lp-sys-padding-section-50);
148
+ --spacing-section-100: var(--lp-sys-padding-section-100);
149
+ --spacing-section-200: var(--lp-sys-padding-section-200);
150
+ --spacing-section-300: var(--lp-sys-padding-section-300);
151
+ --spacing-section-400: var(--lp-sys-padding-section-400);
152
+ --spacing-section-500: var(--lp-sys-padding-section-500);
153
+ --spacing-section-600: var(--lp-sys-padding-section-600);
154
+ --spacing-section-700: var(--lp-sys-padding-section-700);
155
+ --spacing-section-800: var(--lp-sys-padding-section-800);
156
+ --spacing-section-900: var(--lp-sys-padding-section-900);
157
+ --spacing-positive-50: var(--lp-sys-gap-positive-50);
158
+ --spacing-positive-100: var(--lp-sys-gap-positive-100);
159
+ --spacing-positive-150: var(--lp-sys-gap-positive-150);
160
+ --spacing-positive-200: var(--lp-sys-gap-positive-200);
161
+ --spacing-positive-300: var(--lp-sys-gap-positive-300);
162
+ --spacing-positive-400: var(--lp-sys-gap-positive-400);
163
+ --spacing-positive-500: var(--lp-sys-gap-positive-500);
164
+ --spacing-positive-600: var(--lp-sys-gap-positive-600);
165
+ --spacing-positive-700: var(--lp-sys-gap-positive-700);
166
+ --spacing-positive-800: var(--lp-sys-gap-positive-800);
167
+ --spacing-positive-900: var(--lp-sys-gap-positive-900);
168
+ }
169
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liner-fe/design-token",
3
- "version": "2.4.17",
3
+ "version": "2.4.19",
4
4
  "devDependencies": {
5
5
  "@eslint/js": "^9.22.0",
6
6
  "@liner-fe/design-token-primitive": "workspace:^",
@@ -21,11 +21,12 @@
21
21
  "recoil": "^0.5.2"
22
22
  },
23
23
  "scripts": {
24
- "build": "yarn create-css && yarn tsup --config ./config/tsup/tsup.config.ts",
24
+ "build": "yarn create-css && yarn tsup --config ./config/tsup/tsup.config.ts && yarn copy-tailwind",
25
25
  "build:package": "yarn build",
26
26
  "prepack": "yarn build",
27
27
  "create-css": "yarn ts-node ./scripts/index.ts",
28
- "ts-node": "tsx --tsconfig tsconfig.build.json"
28
+ "ts-node": "tsx --tsconfig tsconfig.build.json",
29
+ "copy-tailwind": "yarn ts-node ./scripts/utils/copy-file.ts"
29
30
  },
30
31
  "publishConfig": {
31
32
  "access": "public",
@@ -38,13 +39,13 @@
38
39
  "require": "./lib/index.js"
39
40
  },
40
41
  "./index.css": "./lib/index.css",
42
+ "./tailwind.css": "./lib/tailwind.css",
41
43
  "./package.json": "./package.json"
42
44
  },
43
45
  "main": "./lib/index.js",
44
46
  "types": "./lib/index.d.ts",
45
47
  "files": [
46
48
  "lib",
47
- "src",
48
- "global.css"
49
+ "src"
49
50
  ]
50
51
  }
package/src/style/tailwind.css ADDED
@@ -0,0 +1,169 @@
1
+
2
+ @import 'tailwindcss';
3
+
4
+ @theme {
5
+ --font-flare: 'flare', sans-serif;
6
+
7
+ /* search result page breakpoint */
8
+ /* 답변 페이지에서는 별도로 breakpoint를 지정해 사용하고 있습니다. prism breakpoint와 겹치는 부분은 생략했습니다. */
9
+ --breakpoint-search-result-xl: 1440px;
10
+ --breakpoint-search-result-xxl: 1792px;
11
+
12
+
13
+ /* animation */
14
+ --animate-fadeIn: fadeIn 1s;
15
+
16
+ @keyframes fadeIn {
17
+ 0% {
18
+ opacity: 0;
19
+ }
20
+ 100% {
21
+ opacity: 1;
22
+ }
23
+ }
24
+
25
+ --color-neutral-container-lowest: var(--neutral-container-lowest);
26
+ --color-neutral-container-lowest-hover: var(--neutral-container-lowest-hover);
27
+ --color-neutral-container-low: var(--neutral-container-low);
28
+ --color-neutral-container-low-hover: var(--neutral-container-low-hover);
29
+ --color-neutral-container-mid: var(--neutral-container-mid);
30
+ --color-neutral-container-mid-hover: var(--neutral-container-mid-hover);
31
+ --color-neutral-container-high: var(--neutral-container-high);
32
+ --color-neutral-container-high-hover: var(--neutral-container-high-hover);
33
+ --color-neutral-container-highest: var(--neutral-container-highest);
34
+ --color-neutral-container-static-lowest: var(--neutral-container-static-lowest);
35
+ --color-neutral-container-static-lowest-hover: var(--neutral-container-static-lowest-hover);
36
+ --color-neutral-container-variation-lowest: var(--neutral-container-variation-lowest);
37
+ --color-neutral-fill-lowest: var(--neutral-fill-lowest);
38
+ --color-neutral-fill-lowest-hover: var(--neutral-fill-lowest-hover);
39
+ --color-neutral-fill-low: var(--neutral-fill-low);
40
+ --color-neutral-fill-low-hover: var(--neutral-fill-low-hover);
41
+ --color-neutral-fill-mid: var(--neutral-fill-mid);
42
+ --color-neutral-fill-mid-hover: var(--neutral-fill-mid-hover);
43
+ --color-neutral-fill-high: var(--neutral-fill-high);
44
+ --color-neutral-fill-high-hover: var(--neutral-fill-high-hover);
45
+ --color-neutral-fill-highest: var(--neutral-fill-highest);
46
+ --color-neutral-label-primary: var(--neutral-label-primary);
47
+ --color-neutral-label-secondary: var(--neutral-label-secondary);
48
+ --color-neutral-label-tertiary: var(--neutral-label-tertiary);
49
+ --color-neutral-label-quaternary: var(--neutral-label-quaternary);
50
+ --color-neutral-label-static-primary: var(--neutral-label-static-primary);
51
+ --color-neutral-label-static-secondary: var(--neutral-label-static-secondary);
52
+ --color-neutral-border-overlay-strong: var(--neutral-border-overlay-strong);
53
+ --color-neutral-border-overlay-normal: var(--neutral-border-overlay-normal);
54
+ --color-neutral-border-overlay-subtle: var(--neutral-border-overlay-subtle);
55
+ --color-neutral-border-overlay-hint: var(--neutral-border-overlay-hint);
56
+ --color-neutral-border-opaque-strong: var(--neutral-border-opaque-strong);
57
+ --color-neutral-border-opaque-normal: var(--neutral-border-opaque-normal);
58
+ --color-neutral-border-opaque-subtle: var(--neutral-border-opaque-subtle);
59
+ --color-inverse-container-lowest: var(--inverse-container-lowest);
60
+ --color-inverse-container-lowest-hover: var(--inverse-container-lowest-hover);
61
+ --color-inverse-container-low: var(--inverse-container-low);
62
+ --color-inverse-container-low-hover: var(--inverse-container-low-hover);
63
+ --color-inverse-container-mid: var(--inverse-container-mid);
64
+ --color-inverse-container-mid-hover: var(--inverse-container-mid-hover);
65
+ --color-inverse-container-high: var(--inverse-container-high);
66
+ --color-inverse-container-high-hover: var(--inverse-container-high-hover);
67
+ --color-inverse-container-static-high: var(--inverse-container-static-high);
68
+ --color-inverse-container-static-high-hover: var(--inverse-container-static-high-hover);
69
+ --color-inverse-container-highest: var(--inverse-container-highest);
70
+ --color-inverse-fill-mid: var(--inverse-fill-mid);
71
+ --color-inverse-fill-mid-hover: var(--inverse-fill-mid-hover);
72
+ --color-inverse-label-primary: var(--inverse-label-primary);
73
+ --color-inverse-label-secondary: var(--inverse-label-secondary);
74
+ --color-inverse-label-tertiary: var(--inverse-label-tertiary);
75
+ --color-inverse-label-quaternary: var(--inverse-label-quaternary);
76
+ --color-inverse-label-static-primary: var(--inverse-label-static-primary);
77
+ --color-inverse-label-static-secondary: var(--inverse-label-static-secondary);
78
+ --color-inverse-border-overlay-strong: var(--inverse-border-overlay-strong);
79
+ --color-inverse-border-overlay-normal: var(--inverse-border-overlay-normal);
80
+ --color-inverse-border-overlay-subtle: var(--inverse-border-overlay-subtle);
81
+ --color-inverse-border-overlay-hint: var(--inverse-border-overlay-hint);
82
+ --color-inverse-border-opaque-strong: var(--inverse-border-opaque-strong);
83
+ --color-inverse-border-opaque-normal: var(--inverse-border-opaque-normal);
84
+ --color-inverse-border-opaque-subtle: var(--inverse-border-opaque-subtle);
85
+ --color-brand-container-mid: var(--brand-container-mid);
86
+ --color-brand-container-mid-hover: var(--brand-container-mid-hover);
87
+ --color-brand-container-high: var(--brand-container-high);
88
+ --color-brand-fill-mid: var(--brand-fill-mid);
89
+ --color-brand-fill-mid-hover: var(--brand-fill-mid-hover);
90
+ --color-brand-fill-low: var(--brand-fill-low);
91
+ --color-brand-fill-low-hover: var(--brand-fill-low-hover);
92
+ --color-brand-label-primary: var(--brand-label-primary);
93
+ --color-brand-label-secondary: var(--brand-label-secondary);
94
+ --color-brand-label-variation-secondary: var(--brand-label-variation-secondary);
95
+ --color-brand-border-opaque-normal: var(--brand-border-opaque-normal);
96
+ --color-brand-border-opaque-strong: var(--brand-border-opaque-strong);
97
+ --color-brandinverse-label-primary: var(--brandinverse-label-primary);
98
+ --color-brandinverse-label-secondary: var(--brandinverse-label-secondary);
99
+ --color-brandinverse-label-static-primary: var(--brandinverse-label-static-primary);
100
+ --color-accent-label-primary: var(--accent-label-primary);
101
+ --color-accent-label-yellow: var(--accent-label-yellow);
102
+ --color-accent-label-mint: var(--accent-label-mint);
103
+ --color-accent-label-cyan: var(--accent-label-cyan);
104
+ --color-accent-label-purple: var(--accent-label-purple);
105
+ --color-accent-label-pink: var(--accent-label-pink);
106
+ --color-accent-container-primary: var(--accent-container-primary);
107
+ --color-function-container-positive: var(--function-container-positive);
108
+ --color-function-container-negative: var(--function-container-negative);
109
+ --color-function-container-negative-hover: var(--function-container-negative-hover);
110
+ --color-function-container-caution: var(--function-container-caution);
111
+ --color-function-container-highlight: var(--function-container-highlight);
112
+ --color-function-container-selection: var(--function-container-selection);
113
+ --color-function-container-drag: var(--function-container-drag);
114
+ --color-function-label-positive: var(--function-label-positive);
115
+ --color-function-label-negative: var(--function-label-negative);
116
+ --color-function-label-caution: var(--function-label-caution);
117
+ --color-function-label-link: var(--function-label-link);
118
+ --color-cover-dim-page: var(--cover-dim-page);
119
+ --shadow-normal: var(--lp-sys-shadow-normal);
120
+ --shadow-strong: var(--lp-sys-shadow-strong);
121
+ --shadow-heavy: var(--lp-sys-shadow-heavy);
122
+ --radius-xxs: var(--lp-sys-radius-xxs);
123
+ --radius-xs: var(--lp-sys-radius-xs);
124
+ --radius-s: var(--lp-sys-radius-s);
125
+ --radius-m: var(--lp-sys-radius-m);
126
+ --radius-l: var(--lp-sys-radius-l);
127
+ --radius-xl: var(--lp-sys-radius-xl);
128
+ --radius-xxl: var(--lp-sys-radius-xxl);
129
+ --breakpoint-*: initial;
130
+ --breakpoint-s: 600px;
131
+ --breakpoint-m: 1024px;
132
+ --breakpoint-l: 1366px;
133
+ --breakpoint-xl: 1536px;
134
+ --breakpoint-xxl: 1920px;
135
+ --breakpoint-xxxl: 2560px;
136
+ --spacing-component-50: var(--lp-sys-padding-component-50);
137
+ --spacing-component-100: var(--lp-sys-padding-component-100);
138
+ --spacing-component-150: var(--lp-sys-padding-component-150);
139
+ --spacing-component-200: var(--lp-sys-padding-component-200);
140
+ --spacing-component-300: var(--lp-sys-padding-component-300);
141
+ --spacing-component-400: var(--lp-sys-padding-component-400);
142
+ --spacing-component-500: var(--lp-sys-padding-component-500);
143
+ --spacing-component-600: var(--lp-sys-padding-component-600);
144
+ --spacing-component-700: var(--lp-sys-padding-component-700);
145
+ --spacing-component-800: var(--lp-sys-padding-component-800);
146
+ --spacing-component-900: var(--lp-sys-padding-component-900);
147
+ --spacing-section-50: var(--lp-sys-padding-section-50);
148
+ --spacing-section-100: var(--lp-sys-padding-section-100);
149
+ --spacing-section-200: var(--lp-sys-padding-section-200);
150
+ --spacing-section-300: var(--lp-sys-padding-section-300);
151
+ --spacing-section-400: var(--lp-sys-padding-section-400);
152
+ --spacing-section-500: var(--lp-sys-padding-section-500);
153
+ --spacing-section-600: var(--lp-sys-padding-section-600);
154
+ --spacing-section-700: var(--lp-sys-padding-section-700);
155
+ --spacing-section-800: var(--lp-sys-padding-section-800);
156
+ --spacing-section-900: var(--lp-sys-padding-section-900);
157
+ --spacing-positive-50: var(--lp-sys-gap-positive-50);
158
+ --spacing-positive-100: var(--lp-sys-gap-positive-100);
159
+ --spacing-positive-150: var(--lp-sys-gap-positive-150);
160
+ --spacing-positive-200: var(--lp-sys-gap-positive-200);
161
+ --spacing-positive-300: var(--lp-sys-gap-positive-300);
162
+ --spacing-positive-400: var(--lp-sys-gap-positive-400);
163
+ --spacing-positive-500: var(--lp-sys-gap-positive-500);
164
+ --spacing-positive-600: var(--lp-sys-gap-positive-600);
165
+ --spacing-positive-700: var(--lp-sys-gap-positive-700);
166
+ --spacing-positive-800: var(--lp-sys-gap-positive-800);
167
+ --spacing-positive-900: var(--lp-sys-gap-positive-900);
168
+ }
169
+