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
Social
--color-brand-twitter
#55ACEE
--color-brand-facebook
#305097
--color-brand-instagram
#2A5B83
--color-brand-line
#00C300
--color-brand-nicovideo
#EFB10A
Semantic
背景色や文字色などのモノトーン色を指定するときは、直接色をハードコーディングするのではなく、セマンティックカラーをCSS Variablesで指定します。
指定できるセマンティックカラーは以下のとおりです。
label
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