@seed-design/rootage-artifacts 2.7.0 → 2.8.0

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 (9) hide show
  1. package/__generated__/components/scroll-fog.d.ts +5 -12
  2. package/__generated__/components/scroll-fog.json +5 -12
  3. package/__generated__/gradient.d.ts +143 -0
  4. package/__generated__/gradient.json +143 -0
  5. package/__generated__/index.d.ts +1 -1
  6. package/__generated__/index.json +1 -1
  7. package/components/scroll-fog.yaml +3 -6
  8. package/gradient.yaml +73 -0
  9. package/package.json +1 -1
package/__generated__/components/scroll-fog.d.ts CHANGED
@@ -11,11 +11,8 @@ declare const artifact: {
11
11
  "slots": {
12
12
  "root": {
13
13
  "properties": {
14
- "fromColor": {
15
- "type": "color";
16
- };
17
- "toColor": {
18
- "type": "color";
14
+ "gradient": {
15
+ "type": "gradient";
19
16
  };
20
17
  "size": {
21
18
  "type": "dimension";
@@ -35,13 +32,9 @@ declare const artifact: {
35
32
  ];
36
33
  "slots": {
37
34
  "root": {
38
- "fromColor": {
39
- "type": "color";
40
- "value": "#00000000";
41
- };
42
- "toColor": {
43
- "type": "color";
44
- "value": "#000000ff";
35
+ "gradient": {
36
+ "type": "gradient";
37
+ "value": "$gradient.fade-mask";
45
38
  };
46
39
  "size": {
47
40
  "type": "dimension";
package/__generated__/components/scroll-fog.json CHANGED
@@ -11,11 +11,8 @@
11
11
  "slots": {
12
12
  "root": {
13
13
  "properties": {
14
- "fromColor": {
15
- "type": "color"
16
- },
17
- "toColor": {
18
- "type": "color"
14
+ "gradient": {
15
+ "type": "gradient"
19
16
  },
20
17
  "size": {
21
18
  "type": "dimension"
@@ -35,13 +32,9 @@
35
32
  ],
36
33
  "slots": {
37
34
  "root": {
38
- "fromColor": {
39
- "type": "color",
40
- "value": "#00000000"
41
- },
42
- "toColor": {
43
- "type": "color",
44
- "value": "#000000ff"
35
+ "gradient": {
36
+ "type": "gradient",
37
+ "value": "$gradient.fade-mask"
45
38
  },
46
39
  "size": {
47
40
  "type": "dimension",
package/__generated__/gradient.d.ts CHANGED
@@ -8,6 +8,149 @@ declare const artifact: {
8
8
  "data": {
9
9
  "collection": "color";
10
10
  "tokens": {
11
+ "$gradient.fade-mask": {
12
+ "values": {
13
+ "theme-light": {
14
+ "type": "gradient";
15
+ "value": readonly [
16
+ {
17
+ "color": "#00000000";
18
+ "position": 0;
19
+ },
20
+ {
21
+ "color": "#00000003";
22
+ "position": 0.08;
23
+ },
24
+ {
25
+ "color": "#00000005";
26
+ "position": 0.16;
27
+ },
28
+ {
29
+ "color": "#0000000d";
30
+ "position": 0.22;
31
+ },
32
+ {
33
+ "color": "#00000014";
34
+ "position": 0.29;
35
+ },
36
+ {
37
+ "color": "#00000021";
38
+ "position": 0.35;
39
+ },
40
+ {
41
+ "color": "#0000002e";
42
+ "position": 0.41;
43
+ },
44
+ {
45
+ "color": "#00000040";
46
+ "position": 0.47;
47
+ },
48
+ {
49
+ "color": "#00000052";
50
+ "position": 0.53;
51
+ },
52
+ {
53
+ "color": "#00000066";
54
+ "position": 0.59;
55
+ },
56
+ {
57
+ "color": "#0000007a";
58
+ "position": 0.65;
59
+ },
60
+ {
61
+ "color": "#00000094";
62
+ "position": 0.71;
63
+ },
64
+ {
65
+ "color": "#000000ab";
66
+ "position": 0.78;
67
+ },
68
+ {
69
+ "color": "#000000c7";
70
+ "position": 0.84;
71
+ },
72
+ {
73
+ "color": "#000000e3";
74
+ "position": 0.92;
75
+ },
76
+ {
77
+ "color": "#000000ff";
78
+ "position": 1;
79
+ },
80
+ ];
81
+ };
82
+ "theme-dark": {
83
+ "type": "gradient";
84
+ "value": readonly [
85
+ {
86
+ "color": "#00000000";
87
+ "position": 0;
88
+ },
89
+ {
90
+ "color": "#00000003";
91
+ "position": 0.08;
92
+ },
93
+ {
94
+ "color": "#00000005";
95
+ "position": 0.16;
96
+ },
97
+ {
98
+ "color": "#0000000d";
99
+ "position": 0.22;
100
+ },
101
+ {
102
+ "color": "#00000014";
103
+ "position": 0.29;
104
+ },
105
+ {
106
+ "color": "#00000021";
107
+ "position": 0.35;
108
+ },
109
+ {
110
+ "color": "#0000002e";
111
+ "position": 0.41;
112
+ },
113
+ {
114
+ "color": "#00000040";
115
+ "position": 0.47;
116
+ },
117
+ {
118
+ "color": "#00000052";
119
+ "position": 0.53;
120
+ },
121
+ {
122
+ "color": "#00000066";
123
+ "position": 0.59;
124
+ },
125
+ {
126
+ "color": "#0000007a";
127
+ "position": 0.65;
128
+ },
129
+ {
130
+ "color": "#00000094";
131
+ "position": 0.71;
132
+ },
133
+ {
134
+ "color": "#000000ab";
135
+ "position": 0.78;
136
+ },
137
+ {
138
+ "color": "#000000c7";
139
+ "position": 0.84;
140
+ },
141
+ {
142
+ "color": "#000000e3";
143
+ "position": 0.92;
144
+ },
145
+ {
146
+ "color": "#000000ff";
147
+ "position": 1;
148
+ },
149
+ ];
150
+ };
151
+ };
152
+ "description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다.";
153
+ };
11
154
  "$gradient.glow-magic": {
12
155
  "values": {
13
156
  "theme-light": {
package/__generated__/gradient.json CHANGED
@@ -8,6 +8,149 @@
8
8
  "data": {
9
9
  "collection": "color",
10
10
  "tokens": {
11
+ "$gradient.fade-mask": {
12
+ "values": {
13
+ "theme-light": {
14
+ "type": "gradient",
15
+ "value": [
16
+ {
17
+ "color": "#00000000",
18
+ "position": 0
19
+ },
20
+ {
21
+ "color": "#00000003",
22
+ "position": 0.08
23
+ },
24
+ {
25
+ "color": "#00000005",
26
+ "position": 0.16
27
+ },
28
+ {
29
+ "color": "#0000000d",
30
+ "position": 0.22
31
+ },
32
+ {
33
+ "color": "#00000014",
34
+ "position": 0.29
35
+ },
36
+ {
37
+ "color": "#00000021",
38
+ "position": 0.35
39
+ },
40
+ {
41
+ "color": "#0000002e",
42
+ "position": 0.41
43
+ },
44
+ {
45
+ "color": "#00000040",
46
+ "position": 0.47
47
+ },
48
+ {
49
+ "color": "#00000052",
50
+ "position": 0.53
51
+ },
52
+ {
53
+ "color": "#00000066",
54
+ "position": 0.59
55
+ },
56
+ {
57
+ "color": "#0000007a",
58
+ "position": 0.65
59
+ },
60
+ {
61
+ "color": "#00000094",
62
+ "position": 0.71
63
+ },
64
+ {
65
+ "color": "#000000ab",
66
+ "position": 0.78
67
+ },
68
+ {
69
+ "color": "#000000c7",
70
+ "position": 0.84
71
+ },
72
+ {
73
+ "color": "#000000e3",
74
+ "position": 0.92
75
+ },
76
+ {
77
+ "color": "#000000ff",
78
+ "position": 1
79
+ }
80
+ ]
81
+ },
82
+ "theme-dark": {
83
+ "type": "gradient",
84
+ "value": [
85
+ {
86
+ "color": "#00000000",
87
+ "position": 0
88
+ },
89
+ {
90
+ "color": "#00000003",
91
+ "position": 0.08
92
+ },
93
+ {
94
+ "color": "#00000005",
95
+ "position": 0.16
96
+ },
97
+ {
98
+ "color": "#0000000d",
99
+ "position": 0.22
100
+ },
101
+ {
102
+ "color": "#00000014",
103
+ "position": 0.29
104
+ },
105
+ {
106
+ "color": "#00000021",
107
+ "position": 0.35
108
+ },
109
+ {
110
+ "color": "#0000002e",
111
+ "position": 0.41
112
+ },
113
+ {
114
+ "color": "#00000040",
115
+ "position": 0.47
116
+ },
117
+ {
118
+ "color": "#00000052",
119
+ "position": 0.53
120
+ },
121
+ {
122
+ "color": "#00000066",
123
+ "position": 0.59
124
+ },
125
+ {
126
+ "color": "#0000007a",
127
+ "position": 0.65
128
+ },
129
+ {
130
+ "color": "#00000094",
131
+ "position": 0.71
132
+ },
133
+ {
134
+ "color": "#000000ab",
135
+ "position": 0.78
136
+ },
137
+ {
138
+ "color": "#000000c7",
139
+ "position": 0.84
140
+ },
141
+ {
142
+ "color": "#000000e3",
143
+ "position": 0.92
144
+ },
145
+ {
146
+ "color": "#000000ff",
147
+ "position": 1
148
+ }
149
+ ]
150
+ }
151
+ },
152
+ "description": "콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다."
153
+ },
11
154
  "$gradient.glow-magic": {
12
155
  "values": {
13
156
  "theme-light": {
package/__generated__/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  declare const artifact: {
2
2
  "name": "Rootage";
3
- "version": "2.7.0";
3
+ "version": "2.8.0";
4
4
  "resources": readonly [
5
5
  {
6
6
  "path": "/collections.json";
package/__generated__/index.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "Rootage",
3
- "version": "2.7.0",
3
+ "version": "2.8.0",
4
4
  "resources": [
5
5
  {
6
6
  "path": "/collections.json"
package/components/scroll-fog.yaml CHANGED
@@ -9,17 +9,14 @@ data:
9
9
  slots:
10
10
  root:
11
11
  properties:
12
- fromColor:
13
- type: color
14
- toColor:
15
- type: color
12
+ gradient:
13
+ type: gradient
16
14
  size:
17
15
  type: dimension
18
16
  definitions:
19
17
  base:
20
18
  enabled:
21
19
  root:
22
- fromColor: "#00000000"
23
- toColor: "#000000ff"
20
+ gradient: $gradient.fade-mask
24
21
  # NOTE: do not move/remove this property unless you're bumping the major version of @seed-design/react; vars generated from here have been imported in react/src/components/ScrollFog/ScrollFog.tsx
25
22
  size: 20px
package/gradient.yaml CHANGED
@@ -6,6 +6,79 @@ metadata:
6
6
  data:
7
7
  collection: color
8
8
  tokens:
9
+ $gradient.fade-mask:
10
+ description: 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선입니다. Figma에 없는 개발 전용 토큰입니다.
11
+ values:
12
+ theme-light:
13
+ type: gradient
14
+ value:
15
+ - color: "#00000000"
16
+ position: 0
17
+ - color: "#00000003"
18
+ position: 0.08
19
+ - color: "#00000005"
20
+ position: 0.16
21
+ - color: "#0000000d"
22
+ position: 0.22
23
+ - color: "#00000014"
24
+ position: 0.29
25
+ - color: "#00000021"
26
+ position: 0.35
27
+ - color: "#0000002e"
28
+ position: 0.41
29
+ - color: "#00000040"
30
+ position: 0.47
31
+ - color: "#00000052"
32
+ position: 0.53
33
+ - color: "#00000066"
34
+ position: 0.59
35
+ - color: "#0000007a"
36
+ position: 0.65
37
+ - color: "#00000094"
38
+ position: 0.71
39
+ - color: "#000000ab"
40
+ position: 0.78
41
+ - color: "#000000c7"
42
+ position: 0.84
43
+ - color: "#000000e3"
44
+ position: 0.92
45
+ - color: "#000000ff"
46
+ position: 1
47
+ theme-dark:
48
+ type: gradient
49
+ value:
50
+ - color: "#00000000"
51
+ position: 0
52
+ - color: "#00000003"
53
+ position: 0.08
54
+ - color: "#00000005"
55
+ position: 0.16
56
+ - color: "#0000000d"
57
+ position: 0.22
58
+ - color: "#00000014"
59
+ position: 0.29
60
+ - color: "#00000021"
61
+ position: 0.35
62
+ - color: "#0000002e"
63
+ position: 0.41
64
+ - color: "#00000040"
65
+ position: 0.47
66
+ - color: "#00000052"
67
+ position: 0.53
68
+ - color: "#00000066"
69
+ position: 0.59
70
+ - color: "#0000007a"
71
+ position: 0.65
72
+ - color: "#00000094"
73
+ position: 0.71
74
+ - color: "#000000ab"
75
+ position: 0.78
76
+ - color: "#000000c7"
77
+ position: 0.84
78
+ - color: "#000000e3"
79
+ position: 0.92
80
+ - color: "#000000ff"
81
+ position: 1
9
82
  $gradient.glow-magic:
10
83
  description: 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.
11
84
  values:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "2.7.0",
3
+ "version": "2.8.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",