Skip to content

Commit 1ea8bb5

Browse files
piyoppipiyoppi
authored
Merge pull request #49 from pepabo/attach-sassdoc
adapter-functionにSassDocを添付します
2 parents 506ac15 + 57f7adb commit 1ea8bb5

28 files changed

+901
-4
lines changed

‎packages/adapter/functions/_helpers.scss‎

Lines changed: 229 additions & 4 deletions
Large diffs are not rendered by default.

‎packages/adapter/functions/color/_background.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $background-color-tokens: map.get(
99
background
1010
);
1111

12+
/// 汎用的に使えるbackground colorを取得します。
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-background-color($name: light, $type: well)
17+
/// // ”f7f8fa”
1218
@function get-background-color($name: light, $type: base) {
1319
$base-tokens: map.get($background-color-tokens, base);
1420
$brand-colors: brand, accent;
@@ -51,6 +57,12 @@ $background-color-tokens: map.get(
5157
}
5258
}
5359

60+
/// モーダルなオーバーレイなどで使うscrimのbackground colorを取得します。
61+
///
62+
/// @group color
63+
/// @example
64+
/// functions.get-scrim-background-color()
65+
/// // ”rgba(0, 0, 0, 0.32)”
5466
@function get-scrim-background-color() {
5567
@return map.get($background-color-tokens, scrim);
5668
}

‎packages/adapter/functions/color/_border.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ $border-color-tokens: map.get(
1414
border
1515
);
1616

17+
/// 汎用的に使えるborder colorを取得します。
18+
///
19+
/// @group color
20+
/// @example
21+
/// functions.get-border-color($brightness: light, $name: high_emphasis)
22+
/// // ”rgba(57, 60, 65, 0.3)”
1723
@function get-border-color($brightness: light, $name: high_emphasis) {
1824
$tokens: map.get($border-color-tokens, base);
1925
$available-brightnesses: helpers.get-brightnesses();
@@ -43,10 +49,22 @@ $border-color-tokens: map.get(
4349
@return map.get($brightness-tokens, $name);
4450
}
4551

52+
/// avatarのborder colorを取得します。
53+
///
54+
/// @group color
55+
/// @example
56+
/// functions.get-avatar-border-color()
57+
/// // ”rgba(0, 0, 0, 0)”
4658
@function get-avatar-border-color() {
4759
@return map.get($border-color-tokens, avatar);
4860
}
4961

62+
/// buttonのborder colorを取得します。
63+
///
64+
/// @group color
65+
/// @example
66+
/// functions.get-button-border-color($appearance: flat, $color: neutral, $state: enabled)
67+
/// // ”transparent”
5068
@function get-button-border-color(
5169
$appearance: flat,
5270
$color: neutral,
@@ -104,6 +122,12 @@ $border-color-tokens: map.get(
104122
}
105123
}
106124

125+
/// checkboxのborder colorを取得します。
126+
///
127+
/// @group color
128+
/// @example
129+
/// functions.get-checkbox-border-color($states: (enabled))
130+
/// //”rgba(57, 60, 65, 0.2)”
107131
@function get-checkbox-border-color($states: (enabled)) {
108132
$available-states: helpers.get-states();
109133

@@ -124,6 +148,12 @@ $border-color-tokens: map.get(
124148
}
125149

126150
/// @deprecated この関数は非推奨です
151+
/// focus ringのcolorを取得します。
152+
///
153+
/// @group color
154+
/// @example
155+
/// functions.get-focus-ring-color($color: neutral)
156+
/// //”#9297a1”
127157
@function get-focus-ring-color($color: neutral) {
128158
$available-colors: list.join(
129159
helpers.get-semantic-intentions(),
@@ -182,10 +212,22 @@ $border-color-tokens: map.get(
182212
}
183213
}
184214

215+
/// interactive-listのborder colorを取得します。
216+
///
217+
/// @group color
218+
/// @example
219+
/// functions.get-interactive-list-border-color()
220+
/// // ”rgba(57, 60, 65, 0.2)”
185221
@function get-interactive-list-border-color() {
186222
@return map.get($border-color-tokens, interactive-list);
187223
}
188224

225+
/// interactive-tableのborder colorを取得します。
226+
///
227+
/// @group color
228+
/// @example
229+
/// functions.get-interactive-table-border-color($element: header)
230+
/// // “rgba(57, 60, 65, 0.3)”
189231
@function get-interactive-table-border-color($element: header) {
190232
$tokens: map.get($border-color-tokens, interactive-table);
191233
$available-elements: header, data;
@@ -200,6 +242,12 @@ $border-color-tokens: map.get(
200242
@return map.get($tokens, $element);
201243
}
202244

245+
/// radioのborder colorを取得します。
246+
///
247+
/// @group color
248+
/// @example
249+
/// functions.get-radio-border-color($states: (enabled))
250+
/// // ”rgba(57, 60, 65, 0.2)”
203251
@function get-radio-border-color($states: (enabled)) {
204252
$available-states: helpers.get-states();
205253

@@ -219,10 +267,22 @@ $border-color-tokens: map.get(
219267
}
220268
}
221269

270+
/// side-navigationのborder colorを取得します。
271+
///
272+
/// @group color
273+
/// @example
274+
/// functions.get-side-navigation-border-color()
275+
/// // ”rgba(57, 60, 65, 0.2)”
222276
@function get-side-navigation-border-color() {
223277
@return map.get($border-color-tokens, side-navigation);
224278
}
225279

280+
/// textfieldとselectで共通するfield部分のborder colorを取得します。
281+
///
282+
/// @group color
283+
/// @example
284+
/// functions.get-field-border-color(neutral, enabled)
285+
/// // ”#afb3ba”
226286
@function get-field-border-color($color: neutral, $state: enabled) {
227287
$tokens: map.get($border-color-tokens, field);
228288
$color-tokens: map.get($tokens, $color);

‎packages/adapter/functions/color/_button.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $button-color-tokens: map.get(
99
button
1010
);
1111

12+
/// buttonのbackground colorを取得します。注意事項あり
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-button-color(neutral)
17+
/// // “#585c63”
1218
@function get-button-color($color: neutral) {
1319
$tokens: map.get($button-color-tokens, base);
1420
$available-colors: helpers.get-button-colors();

‎packages/adapter/functions/color/_implication.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $implication-color-tokens: map.get(
99
implication
1010
);
1111

12+
/// implication colorを取得します。
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-implication-color(interactive, 600)
17+
/// // ”#1f7acc”
1218
@function get-implication-color($name: interactive, $level: 1000) {
1319
$available-implications: helpers.get-implications();
1420

‎packages/adapter/functions/color/_overlay.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $overlay-color-tokens: map.get(
99
overlay
1010
);
1111

12+
/// checkbox, radioなどinteractiveな要素にhoverやfocusしたときのoverlay colorを取得します。
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-background-overlay-color(light, enabled)
17+
/// // “rgba(0, 0, 0, 0)”
1218
@function get-background-overlay-color($brightness: light, $state: enabled) {
1319
$tokens: map.get($overlay-color-tokens, background);
1420
$available-brightnesses: helpers.get-brightnesses();
@@ -33,6 +39,12 @@ $overlay-color-tokens: map.get(
3339
@return map.get($brightness-tokens, $state);
3440
}
3541

42+
/// 画像にhoverやfocusしたときのoverlay colorを取得します。
43+
///
44+
/// @group color
45+
/// @example
46+
/// functions.get-image-overlay-color(enabled)
47+
/// // “rgba(0, 0, 0, 0)”
3648
@function get-image-overlay-color($state: enabled) {
3749
$tokens: map.get($overlay-color-tokens, image);
3850
$available-states: helpers.get-states();

‎packages/adapter/functions/color/_primitive.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $primitive-color-tokens: map.get(
99
primitive
1010
);
1111

12+
/// 汎用的に使えるprimitive colorを取得します。
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-primitive-color($name: blue, $level: 600)
17+
/// // “#1f7acc”
1218
@function get-primitive-color($name, $level: 1000) {
1319
$primitive-color-name: map.get($primitive-color-tokens, "#{$name}");
1420

‎packages/adapter/functions/color/_semantic.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ $semantic-color-tokens: map.get(
99
semantic
1010
);
1111

12+
/// 意味が付与されたsemantic colorを取得します。
13+
///
14+
/// @group color
15+
/// @example
16+
/// functions.get-semantic-color(informative, 600)
17+
/// // “#1f7acc”
1218
@function get-semantic-color($intention: neutral, $level: 1000) {
1319
$available-semantics: helpers.get-semantic-intentions();
1420

‎packages/adapter/functions/color/_surface.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@ $surface-color-tokens: map.get(
1313
surface
1414
);
1515

16+
/// 汎用的に使えるsurface colorを取得します。
17+
/// ページやビューなど最下層でbackground colorを持つ要素の上に乗った、形のあるオブジェクト表面の色がsurface colorです。
18+
///
19+
/// @group color
20+
/// @example
21+
/// functions.get-surface-color(light, secondary)
22+
/// // “#f7f8fa”
1623
@function get-surface-color($brightness: light, $priority: primary) {
1724
$tokens: map.get($surface-color-tokens, base);
1825
$available-brightnesses: helpers.get-brightnesses();
@@ -37,10 +44,22 @@ $surface-color-tokens: map.get(
3744
@return map.get($brightness-tokens, $priority);
3845
}
3946

47+
/// avatarのsurface colorを取得します。
48+
///
49+
/// @group color
50+
/// @example
51+
/// functions.get-avatar-surface-color()
52+
/// // “#f7f8fa”
4053
@function get-avatar-surface-color() {
4154
@return map.get($surface-color-tokens, avatar);
4255
}
4356

57+
/// bottom-navigationのsurface colorを取得します。
58+
///
59+
/// @group color
60+
/// @example
61+
/// function get-bottom-navigation-surface-color(filled)
62+
/// // “#1f7acc”
4463
@function get-bottom-navigation-surface-color($appearance: white) {
4564
$tokens: map.get($surface-color-tokens, bottom-navigation);
4665
$available-appearances: helpers.get-bottom-navigation-appearances();
@@ -55,6 +74,12 @@ $surface-color-tokens: map.get(
5574
@return map.get($tokens, $appearance);
5675
}
5776

77+
/// solidなappearanceのbuttonのグラデーションを構成するscrimのcolorを取得します。
78+
///
79+
/// @group color
80+
/// @example
81+
/// function.get-solid-button-scrim-color(start)
82+
/// // “rgba(255, 255, 255, 0.25)”
5883
@function get-solid-button-scrim-color($position: start) {
5984
$tokens: map.get(map.get(map.get($surface-color-tokens, button), solid), scrim);
6085
$available-positions: start, end;
@@ -69,6 +94,12 @@ $surface-color-tokens: map.get(
6994
@return map.get($tokens, $position);
7095
}
7196

97+
/// buttonのsurface colorを取得します。
98+
///
99+
/// @group color
100+
/// @example
101+
/// function.get-button-surface-color($appearance: flat, $brightness: light, $color: neutral, $state: enabled)
102+
/// // “#585c63”
72103
@function get-button-surface-color(
73104
$appearance: flat,
74105
$brightness: light,
@@ -156,6 +187,13 @@ $surface-color-tokens: map.get(
156187
}
157188
}
158189

190+
/// 最終的なbutton表面の色を定義したbackground-imageのグラデーションを取得します。
191+
/// 内部でget-button-surface-color()を使っています。
192+
///
193+
/// @group color
194+
/// @example
195+
/// function.get-button-surface-image($appearance: flat, $brightness: light, $color: neutral, $own-brightness: light, $state: enabled)
196+
/// // “linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(#585c63, #585c63)”
159197
@function get-button-surface-image(
160198
$appearance: flat,
161199
$brightness: light,
@@ -243,6 +281,12 @@ $surface-color-tokens: map.get(
243281
}
244282
}
245283

284+
/// checkboxのsurfaceのcolorを取得します。
285+
///
286+
/// @group color
287+
/// @example
288+
/// function.get-checkbox-surface-color(enabled)
289+
/// // “#ffffff”
246290
@function get-checkbox-surface-color($states: (enabled)) {
247291
$tokens: map.get($surface-color-tokens, checkbox);
248292
$available-states: helpers.get-states();
@@ -263,6 +307,12 @@ $surface-color-tokens: map.get(
263307
}
264308
}
265309

310+
/// ヘッダーの背景色を取得します
311+
///
312+
/// @group color
313+
/// @example
314+
/// functions.get-header-surface-color($appearance: filled)
315+
/// // #1f7acc
266316
@function get-header-surface-color($appearance: white) {
267317
$header-tokens: map.get($surface-color-tokens, header);
268318
$available-appearances: helpers.get-header-appearances();
@@ -277,12 +327,24 @@ $surface-color-tokens: map.get(
277327
@return map.get($header-tokens, #{$appearance});
278328
}
279329

330+
/// プログレスインジケーターの全体を表すtrack（溝）部分のカラーを取得します
331+
///
332+
/// @group color
333+
/// @example
334+
/// functions.get-progress-indicator-track-surface-color()
335+
/// // #e5f3ff
280336
@function get-progress-indicator-track-surface-color() {
281337
$tokens: map.get($surface-color-tokens, progress-indicator);
282338

283339
@return map.get($tokens, track);
284340
}
285341

342+
/// プログレスインジケーターの進捗を表すindicator部分のカラーを取得します
343+
///
344+
/// @group color
345+
/// @example
346+
/// functions.get-progress-indicator-indicator-surface-color()
347+
/// // #3e93de
286348
@function get-progress-indicator-indicator-surface-color() {
287349
$tokens: map.get($surface-color-tokens, progress-indicator);
288350

@@ -293,10 +355,25 @@ $surface-color-tokens: map.get(
293355
@return get-surface-color($brightness: light, $priority: primary);
294356
}
295357

358+
/// スケルトン背景の背景色を取得します
359+
///
360+
/// @group color
361+
/// @example
362+
/// functions.get-skeleton-surface-color()
363+
/// // rgba(0, 0, 0, 0.2)
296364
@function get-skeleton-surface-color() {
297365
@return map.get($surface-color-tokens, skeleton);
298366
}
299367

368+
/// フィールド要素の背景色を取得します
369+
///
370+
/// @group color
371+
/// @example
372+
/// functions.get-field-surface-color(
373+
/// $color: neutral,
374+
/// $state: enabled
375+
/// )
376+
/// // #f7f8fa
300377
@function get-field-surface-color($color: neutral, $state: enabled) {
301378
$tokens: map.get($surface-color-tokens, field);
302379
$color-tokens: map.get($tokens, $color);

0 commit comments

Comments
 (0)