@liner-fe/design-token 2.4.17 → 2.4.18

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