Primary

--color-primary-25

#F2F8FC

--color-primary-50

#E6F2F8

--color-primary-75

#CCE5F1

--color-primary-100

#B3D7EB

--color-primary-200

#80BDDD

--color-primary-300

#4DA3CF

--color-primary-400

#268FC5

--color-primary-500

#007BBB

--color-primary-600

#006FA8

--color-primary-700

#006296

--color-primary-800

#005683

--color-primary-900

#00507A

Secondary

--color-secondary-25

#FEF6F3

--color-secondary-50

#FCEDE8

--color-secondary-75

#FADBD1

--color-secondary-100

#F7C8BA

--color-secondary-200

#F2A48C

--color-secondary-300

#ED805D

--color-secondary-400

#E9643B

--color-secondary-500

#E54918

--color-secondary-600

#CE4216

--color-secondary-700

#B73A13

--color-secondary-800

#A03311

--color-secondary-900

#952F10

Success

--color-success-25

#F6FbF6

--color-success-50

#EDF7ED

--color-success-75

#DBEEDC

--color-success-100

#C9E7CA

--color-success-200

#A5D7A7

--color-success-300

#81C684

--color-success-400

#66BA69

--color-success-500

#4BAE4F

--color-success-600

#449D47

--color-success-700

#3C8B3F

--color-success-800

#357A37

--color-success-900

#317133

Warning

--color-warning-25

#FFFCF6

--color-warning-50

#FFFAED

--color-warning-75

#FEF4DB

--color-warning-100

#FEEFCA

--color-warning-200

#FDE5A6

--color-warning-300

#FCDA82

--color-warning-400

#FCD268

--color-warning-500

#FBCA4D

--color-warning-600

#E2B645

--color-warning-700

#C9A23E

--color-warning-800

#B08D36

--color-warning-900

#A38332

Danger

--color-danger-25

#FEF5F4

--color-danger-50

#FDEBEA

--color-danger-75

#FAD7D4

--color-danger-100

#F8C4BF

--color-danger-200

#F49C94

--color-danger-300

#EF7469

--color-danger-400

#EB5749

--color-danger-500

#E83929

--color-danger-600

#D13325

--color-danger-700

#BA2E21

--color-danger-800

#A2281D

--color-danger-900

#97251B

Default

--color-default-25

#F7F7F7

--color-default-50

#EFEFEF

--color-default-75

#DFDFDF

--color-default-100

#D0D0D0

--color-default-200

#B0B0B0

--color-default-300

#909090

--color-default-400

#797979

--color-default-500

#616161

--color-default-600

#575757

--color-default-700

#4E4E4E

--color-default-800

#444444

--color-default-900

#3F3F3F

Black & White

--color-white

#FFFFFF

--color-black

#000000

--color-white

#FFFFFF

--color-black

#000000

--color-brand-twitter

#55ACEE

--color-brand-facebook

#305097

--color-brand-instagram

#2A5B83

--color-brand-line

#00C300

--color-brand-nicovideo

#EFB10A

Semantic

背景色や文字色などのモノトーン色を指定するときは、直接色をハードコーディングするのではなく、セマンティックカラーをCSS Variablesで指定します。

. background {
  boackground-color: var(--color-separator);
}

指定できるセマンティックカラーは以下のとおりです。

label

--color-label

#444444

secondary-label

--color-secondary-label

#B0B0B0

placeholder-text

--color-placeholder-text

#D0D0D0

background

--color-background

#FFFFFF

secondary-background

--color-secondary-background

#FFFFFF

tertiary-background

--color-tertiary-background

#FFFFFF

grouped-background

--color-grouped-background

#F7F7F7

secondary-grouped-background

--color-secondary-grouped-background

#FFFFFF

tertiary-grouped-background

--color-tertiary-grouped-background

#F7F7F7

separator

--color-separator

#EFEFEF

search-bar-background

--color-search-bar-background

#DFDFDF

textfield-background

--color-textfield-background

#FFFFFF

textfield-separator

--color-textfield-separator

#000000

segmented-control-background

--color-segmented-control-background

#D0D0D0

square-radio-separator

--color-square-radio-separator

#DFDFDF

pagenation-background

--color-pagenation-background

#000000

close-button-background

--color-close-button-background

#D0D0D0

Primary

Secondary

Success

Warning

Danger

Default

Black & White

Social

Semantic

label

secondary-label

placeholder-text

background

secondary-background

tertiary-background

grouped-background

secondary-grouped-background

tertiary-grouped-background

separator

search-bar-background

textfield-background

textfield-separator

segmented-control-background

square-radio-separator

pagenation-background

close-button-background

メニュー